从子组件自动重定向到父组件答案

【问题标题】：Automatic redirection from child component to parent component从子组件自动重定向到父组件
【发布时间】：2021-09-01 11:25:39
【问题描述】：

我目前遇到角度路由问题。

当我尝试访问以延迟加载方式加载的组件的子路径时，该路径会在地址栏中出现一小段时间，然后立即重定向到父组件的路径。

例如，如果我想访问 localhost:4200/dummy/table，如果我尝试通过 [routerLink] 导航，它会重定向到 localhost:4200/dummy。

如果我直接在地址栏输入localhost:4200/dummy/table，会正确加载模块并显示子组件。

稍微清理一下代码以简化示例我的菜单看起来像这样

<ul>
  <li *ngFor="let item of menu" [routerLink]="item.url"> 
      {{ item.title }} 
      <ul>
        <li *ngFor="let subItem of item.children" [routerLink]="[item.url, subItem.url]">
            {{ subItem.title }}
        </li>
      </ul>
  </li>
</ul>

如果你不介意的话，剩下的代码我把它放在图像中

应用路由：

虚拟模块：

菜单.json：

有人知道我会发生什么吗？

根据 {enableTracing: true} 它进入路由但退出它

【问题讨论】：

标签： angular angular-routing

【解决方案1】：

因为嵌套元素，父子元素都设置了routerLink属性。我建议将父级包装在跨度或锚标记中以删除routerLinks 的嵌套。下面提供了一个示例。

<ul>
  <li *ngFor="let item of menu"> 
      <span [routerLink]="item.url"> {{ item.title }} </span>
      <ul>
        <li *ngFor="let subItem of item.children" [routerLink]="[item.url, subItem.url]">
            {{ subItem.title }}
        </li>
      </ul>
  </li>
</ul>```

【讨论】：