私の問題は非常に典型的です。 の背後にあるアプリケーションのプライベート部分がありますlogin form。 ログインが成功すると、管理アプリケーションの子ルートに移動します。
global navigation menu私の問題は、ルーターが私のAdminComponentではなく私の にルーティングしようとするため、 を使用できないことですAppCompoment。そのため、ナビゲーションが壊れています。
もう 1 つの問題は、誰かが URL に直接アクセスしたい場合、親の「ログイン」ルートにリダイレクトしたいということです。しかし、うまくいきません。これら 2 つの問題は似ているように思えます。
どうすればそれができるのか、何かアイデアはありますか?
ベストアンサー1
リンク/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});