时间戳

首页 > 解决方案 > 从应用组件侧栏路由到​​带参数的组件

angular - 从应用组件侧栏路由到​​带参数的组件

问题描述

我有一个带有侧边栏的 app.component。加载 app.component 时，我从后端的数据动态构建侧边菜单。单击侧边菜单中动态生成的链接之一时，我想加载一个组件并基于该参数构建内容。我的第一个想法是使用 routerLink：

应用程序组件：

<div>
  <div *ngFor="let menuItem of menuItems" [routerLink]="['/assets',menuItem]">{{menuItem}}</div>
</div>

然后在组件的构造函数中订阅这些参数。但是我意识到单击每个链接时不会调用构造函数（正确地是因为 Angular 知道组件已经加载）。

做这样的事情的正确方法是什么？我是 Angular 的新手，所以请随意添加片段或示例链接。

标签： angular

解决方案

  1. 您的路线必须在 app.module.ts 文件中注册（以便您可以访问 YourComponent 中的 menuItem 值）：

    Router.forRoot(
    [
        { path: 'assets/:menuItem', component: YourComponent }
    ]
)

  2. 订阅事件：

    constructor( private route: ActivatedRoute,
private router: Router) {}

ngOnInit() {
    this.sub = this.route
    .queryParams
    .subscribe(params => {
        params['menuItem'];
    });
}

推荐阅读