使用参数从应用程序组件侧栏路由到​​组件

Question

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

app.component：

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

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

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

Answer 1

1. 使用routerLinkActive =“ active”使链接处于活动状态。

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

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

3. 订阅事件：

   constructor( private route: ActivatedRoute,
   private router: Router) {}
   
   ngOnInit() {
       this.sub = this.route
       .queryParams
       .subscribe(params => {
           params['menuItem'];
       });
   }