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

Question

我目前遇到 angular 路由问题。

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

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

如果我直接在地址栏输入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>

如果你不介意的话，剩下的代码我把它作为图像

应用路由：

虚拟模块：

menu.json:

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

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

Answer 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>```

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

Automatic redirection from child component to parent component

angular-routing

angular