このルーター設定を取得したとしましょう
export const EmployeeRoutes = [
{ path: 'sales', component: SalesComponent },
{ path: 'contacts', component: ContactsComponent }
];
このURL経由でSalesComponent
に移動しました
/department/7/employees/45/sales
ここでcontacts
にアクセスしたいのですが、絶対ルートのすべてのパラメーター(たとえば、部門ID、上記の例の7
)がないため、取得したいです相対リンクを使用して、たとえば.
[routerLink]="['../contacts']"
または
this.router.navigate('../contacts')
残念ながら機能しません。明らかな解決策があるかもしれませんが、私はそれを見ていません。誰でもここで助けてくれますか?
新しいルーター(3.0.0-beta2)を使用している場合は、ActivatedRouteを使用して、次のように相対パスに移動できます。
constructor(private router: Router, private r:ActivatedRoute) {}
///
// DOES NOT WORK SEE UPDATE
goToContact() {
this.router.navigate(["../contacts"], { relativeTo: this.r });
}
current route: /department/7/employees/45/sales
the old version will do: /department/7/employees/45/sales/contacts
@KCarnailleのコメントによると、上記は最新のルーターでは機能しません。新しい方法は、.parent
をthis.r
に追加することです
// Working(08/02/2019)
goToContact() {
this.router.navigate(["../contacts"], { relativeTo: this.r.parent });
}
the update will do: /department/7/employees/45/contacts
RouterLinkディレクティブは、提供されたリンクを常に現在のURLへのデルタとして扱います:
[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']" // or
[routerLink]="['child']"
// with route param ../sibling;abc=xyz
[routerLink]="['../sibling', {abc: 'xyz'}]"
// with query param and fragment ../sibling?p1=value1&p2=v2#frag
[routerLink]="['../sibling']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"
navigate()
メソッドには、開始点(つまり、relativeTo
パラメーター)が必要です。何も指定されていない場合、ナビゲーションは絶対です:
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 ../sibling;abc=xyz
this.router.navigate(["../sibling", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment ../sibling?p1=value1&p2=v2#frag
this.router.navigate("../sibling", {relativeTo: this.route,
queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});
// RC.5+: navigate without updating the URL
this.router.navigate("../sibling", {relativeTo: this.route, skipLocationChange: true});