子ルートから親ルートに移動するにはどうすればよいですか？

私の問題は非常に古典的です。の背後にあるアプリケーションのプライベート部分がありますlogin form。ログインが成功すると、管理アプリケーションの子ルートに移動します。

私の問題はglobal navigation menu、ルーターが私のAdminComponent代わりに私のでルーティングしようとするため、を使用できないことAppCompomentです。だから私のナビゲーションは壊れています。

もう1つの問題は、誰かがURLに直接アクセスしたい場合、親の「ログイン」ルートにリダイレクトしたいということです。しかし、私はそれを機能させることはできません。これらの2つの問題は似ているように私には思えます。

それをどのように行うことができるか考えていますか？

リンク/ HTMLが必要ですか、それとも命令型/コードでルーティングしますか？

リンク：RouterLinkディレクティブは、提供されたリンクを常に現在のURLへのデルタとして扱います。

[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"     // or
[routerLink]="['child']" 

// with route param     ../../parent;abc=xyz
[routerLink]="['../../parent', {abc: 'xyz'}]"
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
[routerLink]="['../../parent']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"

RouterLinkでは、directives配列をインポートして使用することを忘れないでください。

import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
    directives: [ROUTER_DIRECTIVES],

命令型：navigate()メソッドには開始点（つまり、relativeToパラメーター）が必要です。何も提供されていない場合、ナビゲーションは絶対的です。

import { Router, ActivatedRoute } from '@angular/router';
...
constructor(private router: Router, private route: ActivatedRoute) {}
...
this.router.navigate(["/absolute/path"]);
this.router.navigate(["../../parent"], {relativeTo: this.route});
this.router.navigate(["../sibling"],   {relativeTo: this.route});
this.router.navigate(["./child"],      {relativeTo: this.route}); // or
this.router.navigate(["child"],        {relativeTo: this.route});

// with route param     ../../parent;abc=xyz
this.router.navigate(["../../parent", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
this.router.navigate(["../../parent"], {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// navigate without updating the URL 
this.router.navigate(["../../parent"], {relativeTo: this.route, skipLocationChange: true});

これは2017年春の時点で私にとってはうまくいくようです：

goBack(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

コンポーネントctorが受け入れActivatedRoute、Router次のようにインポートされた場合：

import { ActivatedRoute, Router } from '@angular/router';

このように親ルートに移動できます

this.router.navigate(['.'], { relativeTo: this.activeRoute.parent });

コンストラクターに現在アクティブなルートを挿入する必要があります

constructor(
    private router: Router,
    private activeRoute: ActivatedRoute) {

  }

constructor(private router: Router) {}

navigateOnParent() {
  this.router.navigate(['../some-path-on-parent']);
}

ルーターはサポートします

• 絶対パス/xxx-ルートコンポーネントのルーターで開始
• 相対パスxxx-現在のコンポーネントのルーターで開始
• 相対パス../xxx-現在のコンポーネントの親ルーターで開始

現在のルートまたは親ルートのパラメーターの数に関係なく、親コンポーネントに移動するには：Angular 6 update 1/21/19

   let routerLink = this._aRoute.parent.snapshot.pathFromRoot
        .map((s) => s.url)
        .reduce((a, e) => {
            //Do NOT add last path!
            if (a.length + e.length !== this._aRoute.parent.snapshot.pathFromRoot.length) {
                return a.concat(e);
            }
            return a;
        })
        .map((s) => s.path);
    this._router.navigate(routerLink);

これには、シングルトンルーターで使用できる絶対ルートであるという追加のボーナスがあります。

（確かにAngular 4+、おそらくAngular 2も。）

別の方法はこのようになる可能性があります

this._router.navigateByUrl(this._router.url.substr(0, this._router.url.lastIndexOf('/'))); // go to parent URL

これがコンストラクターです

constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }

あまり苦労せずに：

this.router.navigate(['..'], {relativeTo: this.activeRoute, skipLocationChange: true});

パラメータ'..'は、ナビゲーションを1レベル上、つまり親にします:)

私のルートには次のようなパターンがあります。

• ユーザー/編集/ 1->編集
• user / create / 0->作成
• ユーザー/->リスト

たとえば、編集ページを表示していて、リストページに戻る必要がある場合は、ルート上で2レベル上に戻ります。

そのことを考えて、「level」パラメーターを使用してメソッドを作成しました。

goBack(level: number = 1) {
    let commands = '../';
    this.router.navigate([commands.repeat(level)], { relativeTo: this.route });
}

したがって、編集からリストに移動するには、次のようなメソッドを呼び出します。

this.goBack(2);

uiSrefディレクティブを使用している場合は、これを行うことができます

uiSref="^"

私の解決策は次のとおりです。

const urlSplit = this._router.url.split('/');
this._router.navigate([urlSplit.splice(0, urlSplit.length - 1).join('/')], { relativeTo: this._route.parent });

そしてRouter注射：

private readonly _router: Router

これのどれも私のために働きませんでした...私は使用しなければなりませんでした：

import { Router } from '@angular/router';

private router: Router

this.router.navigate([this.router.url.substring(0, this.router.url.lastIndexOf('/'))]);

からコンストラクターに場所を追加します @angular/common

constructor(private _location: Location) {}

back関数を追加します。

back() {
  this._location.back();
}

そしてあなたの見解では：

<button class="btn" (click)="back()">Back</button>