[解決済み] 子ルートから親ルートに移動するにはどうしたらいいですか？

質問

私の問題は非常に古典的です。私はアプリケーションのプライベートな部分を持っていて、それは login form . ログインが成功すると、管理アプリケーションの子ルートに移動します。

私の問題点は、ログイン時に global navigation menu でルーティングしようとするからです。 AdminComponent でルーティングしようとするからです。 AppCompoment . だから、私のナビゲーションは壊れています。

もう一つの問題は、誰かがURLに直接アクセスしたい場合、私は親の "login" ルートにリダイレクトしたいことです。しかし、私はそれを動作させることができません。この 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});