我知道我可以将参数传递给routerLink
以获取
/user/:id
写作
[routerLink]="['/user', user.id]"
但是这个路线怎么样:
/user/:id/details
有没有办法设置这个参数,还是我应该考虑不同的URL方案?
答案 0 :(得分:263)
在您的特定示例中,您将执行以下routerLink
:
[routerLink]="['user', user.id, 'details']"
要在控制器中执行此操作,您可以注入Router
并使用:
router.navigate(['user', user.id, 'details']);
的Angular文档Routing & Navigation部分中的详细信息
答案 1 :(得分:18)
也许这是非常晚的答案,但如果你想用param导航另一个页面,你可以,
[routerLink]="['/user', user.id, 'details']"
你也不应该忘记路由配置,如
[path: 'user/:id/details', component:userComponent, pathMatch: 'full']
答案 2 :(得分:2)
有多种实现方法。
routerLink属性要求您将routingModule导入功能模块,以防您延迟加载功能模块;或者如果未自动将其添加到AppModule导入数组中,则仅导入app-routing-module。
<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()
答案 3 :(得分:0)
首先在表中进行配置:
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}`);
});
答案 4 :(得分:0)
constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.queryParams.subscribe(params => {
console.log(params['type'])
}); }
这对我有用!
答案 5 :(得分:0)
app-routing.module.ts
const routes: Routes = [
{ path: 'products', component: ProductsComponent },
{ path: 'product/:id', component: ProductDetailsComponent },
{ path: '', redirectTo: '/products', pathMatch: 'full' },
];
在控制器中,您可以像这样导航
this.router.navigate(['/products', productId]);
它将使您进入这样的路径:http:// localhost:4200 / products / product-id
答案 6 :(得分:0)
构造函数(私有激活路由:ActivatedRoute){}
如果你会使用 this.activatedRoute.parmas.subscribe(params => { console.log(params['type']) });所以 params 而不是 queryparamas 从 url 中获取参数 –
答案 7 :(得分:0)
很简单
<a routerLink="/user/{{id}}/details"></a>