是的,Angular 路由能够应用 URL 参数。你可以使用路由配置中的 :paramName
语法来指定参数,并在组件中使用 ActivatedRoute
服务来访问这些参数。
下面是一个示例:
首先,在路由配置中定义一个带参数的路由:
const routes: Routes = [
{ path: 'user/:id', component: UserComponent }
];
然后,在组件中使用 ActivatedRoute
服务来访问参数:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
userId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.userId = params['id'];
});
}
}
在上面的例子中,我们定义了一个带有 :id
参数的路由,并在 UserComponent
组件中订阅了 params
可观察对象。当路由参数发生变化时,我们通过 params['id']
获取新的参数值,并将其赋值给 userId
变量。
最后,你可以在模板中使用 userId
变量来显示参数值:
User ID: {{ userId }}
这样,当导航到 /user/123
URL 时,页面将显示 "User ID: 123"。