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方法，它循环遍历路径的子节点，并将名称变量建立为路径。

菜单-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，但屏幕不会更新。如果我手动访问每个网址（例如：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 } ];
菜单-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的任何内容

Angular Router与子组件相同

我的问题

2 个答案: