具有相同组件子级的角路由器答案

【问题标题】：Angular Router with children of same component具有相同组件子级的角路由器
【发布时间】：2018-01-11 12:57:19
【问题描述】：

这是我的路线：

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);
}

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

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

我的问题

当我单击其中一个按钮时，似乎不会更新 MenuViewComponent。它将更新地址栏中的 URL，但屏幕不会更新。如果我手动访问每个 url（例如：foo.com/menu/root1/folder1），它将显示正确的菜单选项，只是我无法弄清楚如何使路由与按钮链接一起工作。

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript angular routing

【解决方案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 个菜单选择。但它可以满足我现在的需要。

【讨论】：

您可以使用某种类型的可选参数而不是必需参数。然后，您可以添加任意数量的参数，而无需在路由配置中全部指定。有关更多信息，请参阅此帖子：stackoverflow.com/questions/44864303/…

【解决方案2】：

我是这样找到的：

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

那么你在 /app 下的任何深度都将使用 AppComponent

【讨论】：