具有相同组件子代的Angular Router

Question

这是我的路线：

app.module.ts

 const appRoutes: Routes = [ { path: 'menu', component: MenuViewComponent, children: [ { path: ':name', component: MenuViewComponent, children: [ { path: ':name', component: MenuViewComponent , children: [ { path: ':name', component: MenuViewComponent } ] } ] } ] }, { path: '', component: LandingViewComponent}, { path: '**', component: PageNotFoundViewComponent } ]; 

我有一项服务，该服务返回用于制作菜单的此数据结构

 [ "name" : "root1", "children" : [ "name" : "folder1", "children" : [ "name" : "folder1_item1" ], "name" : "folder2", "children" : [ "name" : "folder2_item1" ] ], "name" : "root2", "children" : [ "name" : "folder3", "children" : [ "name" : "folder3_item1" ], "name" : "folder4", "children" : [ "name" : "folder4_item1" ] ] ] 

在我的MenuViewComponent内部，我有一个onInit方法，该方法遍历路由的子级并将名称变量构建为路径。

menu-view.component.ts

 ngOnInit() { var path : string[] = []; var cont = this.route; var index : number = 0; do { cont.params.subscribe( params => { if(params) path[index] = params['name']; }); index++; cont = cont.firstChild; } while(cont); this.myservice.getMenuItems(path).then(menuItems => this.menuCards = menuItems); } 

该路径数组作为参数发送到我的get菜单项方法中，该方法将遍历树并返回该路径的菜单节点及其子级。

MenuViewComponent使用ngFor显示n个MenuCardComponents。 如果每个子菜单都使用按钮和routerLink属性，则每个链接到另一个菜单。

我的问题

当我单击其中一个按钮时，似乎没有角度会更新MenuViewComponent。 它将更新地址栏中的URL，但屏幕不会更新。 如果我手动访问每个URL（例如：foo.com/menu/root1/folder1），它将显示正确的菜单选项，只是我不知道如何使用按钮链接来使路线正常工作。

根据我的理解，我需要以某种方式重新初始化MenuViewComponent。 但是我不知道该怎么做。

任何帮助，将不胜感激。

Answer 1

所以这就是我最终要做的事情：

app.module.ts

 const appRoutes: Routes = [ { path: 'menu/:name1/:name2/:name3', component: MenuViewComponent }, { path: 'menu/:name1/:name2', component: MenuViewComponent }, { path: 'menu/:name1', component: MenuViewComponent }, { path: 'menu', component: MenuViewComponent }, { path: '', component: LandingViewComponent}, { path: '**', component: PageNotFoundViewComponent } ]; 

menu-view.component.ts

 ngOnInit() { this.route.paramMap.switchMap((params: ParamMap) => { this.path = []; if(params.get('name1')) { this.path[0] = params.get('name1'); if(params.get('name2')) { this.path[1] = params.get('name2'); if(params.get('name3')) { this.path[2] = params.get('name3'); } } } return this.menuService.getMenuItem(this.path); }) .subscribe((menuNode: MenuCard[]) => this.menuCards = menuNode); } 

我本来希望不必用不同的名称来命名每个级别（即name1，name2，name3），但这仍然不是最有效的代码，我更喜欢动态的，能够处理N个菜单选项的东西。 但是它可以满足我现在的需求。

Answer 2

我发现是这样的：

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'app',
    children: [
      {
        path: '**',
        component: AppComponent
      }]},
  {path: 'home/', component: HomeComponent},
  {path: '**', component: HomeComponent}
];

然后，您将在/ app下深入使用AppComponent