次のrouterLink
ようなルートのパラメータを渡すことができることを知っています
/user/:id
書いて
[routerLink]="['/user', user.id]"
しかし、このようなルートについてはどうですか:
/user/:id/details
このパラメーターを設定する方法はありますか、または別のURLスキームを検討する必要がありますか?
次のrouterLink
ようなルートのパラメータを渡すことができることを知っています
/user/:id
書いて
[routerLink]="['/user', user.id]"
しかし、このようなルートについてはどうですか:
/user/:id/details
このパラメーターを設定する方法はありますか、または別のURLスキームを検討する必要がありますか?
回答:
特定の例では、次のようにしますrouterLink
。
[routerLink]="['user', user.id, 'details']"
コントローラでこれを行うには、以下を注入Router
して使用できます。
router.navigate(['user', user.id, 'details']);
ルーティングとナビゲーションのAngular docs Link Parameters Arrayセクションの詳細情報
<button mat-button routerLink="...">View user</button>
構文?
最初にテーブルで設定します:
const routes: Routes = [
{
path: 'class/:id/enrollment/:guid',
component: ClassEnrollmentComponent
}
];
今タイプスクリプトコード:
this.router.navigate([`class/${classId}/enrollment/${4545455}`]);
別のコンポーネントでパラメーターを受け取る
this.activatedRoute.params.subscribe(params => {
let id = params['id'];
let guid = params['guid'];
console.log(`${id},${guid}`);
});
これを実現する方法はいくつかあります。
routerLink属性では、機能モジュールを遅延ロードした場合にルーティングモジュールを機能モジュールにインポートするか、app-routing-moduleがAppModuleインポート配列に自動的に追加されない場合はインポートする必要があります。
<a [routerLink]="['/user', user.id]">John Doe</a>
<a routerLink="urlString">John Doe</a> // urlString is computed in your component
// Inject Router into your component
// Inject ActivatedRoute into your component. This will allow the route to be done related to the current url
this._router.navigate(['user',user.id], {relativeTo: this._activatedRoute})
this._router.navigateByUrl(urlString).then((bool) => {}).catch()