在Angular中,可以通过使用动态参数来传递参数给路由器。然而,有时候动态参数可能会导致路由不起作用的问题。下面是一种解决方法:
const routes: Routes = [
{ path: 'users/:id', component: UserComponent }
];
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-user',
template: `
User Details
ID: {{ userId }}
`
})
export class UserComponent implements OnInit {
userId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.userId = this.route.snapshot.paramMap.get('id');
}
}
在上面的示例中,我们定义了一个基础路由users/:id
,它接受一个动态参数id
。然后,在UserComponent组件中,我们使用ActivatedRoute服务来获取动态参数的值,并将其绑定到userId属性上。
这样,当访问/users/123
时,路由器将匹配到基础路由,并将动态参数的值传递给UserComponent组件,然后我们可以在模板中显示该参数的值。
请注意,上述示例使用了快照(snapshot)来获取动态参数的值。如果路由参数可能会更改,您可以订阅ActivatedRoute的paramMap属性,并在参数更改时更新userId属性。
希望这可以帮助您解决Angular路由器中动态参数不起作用的问题!