在Angular中,可以使用路由参数来传递数据。以下是一个示例解决方法:
const routes: Routes = [
{ path: 'user/:id', component: UserComponent }
];
import { ActivatedRoute } from '@angular/router';
export class UserComponent {
userId: string;
constructor(private route: ActivatedRoute) {
this.userId = this.route.snapshot.params['id'];
}
}
User ID: {{ userId }}
在上述示例中,当访问/user/123时,路由参数id的值将被传递到UserComponent组件,并显示用户id为123。
注意:如果需要在同一个组件中动态更新路由参数的值,可以订阅params属性的变化。例如:
import { ActivatedRoute } from '@angular/router';
export class UserComponent implements OnInit {
userId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.userId = params['id'];
});
}
}
这样,当路由参数发生变化时,用户id将自动更新并显示在模板中。