angular - Routerlink 导航后，Router-outlet 未更新

问题描述

我正在创建一个带有导航菜单的简单 Angular 应用程序。每个菜单项都有一个Routerlink在页面之间导航。这是页面：

主页 ( #/home)
客户/信息 ( #/customer/info)
客户/详情 ( #/customer/details)
客户 / 详情 / b0 ( #/customer/details/b0)
客户 / 详情 / b1 ( #/customer/details/b1)

相关代码：

app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      [
        {
          path: "",
          redirectTo: "home",
          pathMatch: "full"
        },
        {
          path: "home",
          component: HomeComponent
        },
        {
          path: "customer",
          component: CustomerComponent,
          children: [
            {
              path: "",
              redirectTo: "info",
              pathMatch: "full"
            },
            {
              path: "info",
              component: CustomerInfoComponent,
            },
            {
              path: "details",
              component: CustomerDetailsComponent,
              children: [
                {
                  path: "",
                  redirectTo: "b0",
                  pathMatch: "full"
                },
                {
                  path: "b0",
                  component: CustomerDetailsBlock0Component
                },
                {
                  path: "b1",
                  component: CustomerDetailsBlock1Component
                },
              ]
            }
          ]
        }
      ],
      {useHash: true}
    )
    ],
  declarations: [ AppComponent, CustomerComponent, MenuComponent, HomeComponent, CustomerInfoComponent, CustomerDetailsComponent, CustomerDetailsBlock0Component, CustomerDetailsBlock1Component ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

客户组件.html

<p>This is customer #{{id}}</p>
<app-menu>
  <router-outlet></router-outlet>
</app-menu>

客户详情-component.html

<p>This is customer details</p>
<router-outlet></router-outlet>

客户详情-block0-component.html

<p>details block0</p>

客户详情-block1-component.html

<p>details block1</p>

菜单组件.html

<div>
  <ul>
    <li>
      <a routerLink="">Home</a>
    </li>
    <li>
      <a routerLink="../customer">Customer</a>
      <ul>
        <li>
          <a routerLink="../customer/info">Info</a>
        </li>
        <li>
          <a routerLink="../customer/details">Details</a>
          <ul>
            <li>
              <a routerLink="../customer/details/b0">Block #0</a>
            </li>
            <li>
              <a routerLink="../customer/details/b1">Block #1</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <p>------------- Content inside menu router-outlet -------------</p>
  <router-outlet></router-outlet>
  <p>--------------------------------------------------------------------</p>
</div>

导航工作正常：当我点击一个链接时，激活的路线发生了变化，router-outlet更新了并显示了预期的组件。

当我刷新页面时出现问题#/customer/details/b1（或者如果我直接点击它，而不点击父菜单项）：组件是好的，但我的菜单坏了。如果我单击链接以#/customer/details/b0更改路线但未更新路由器插座，则该b1组件仍会显示并且b0不显示。当我单击 URL 不以“客户/详细信息”开头的另一个菜单项时，此问题已得到解决，例如，如果我单击“信息”，则问题就消失了。

我想这是一个关于组件customer-details是同一个实例的问题，所以 Angular 重用了它。但是为什么子组件没有改变呢？

我设法通过在每次调用路由器shouldReuseRoute函数时返回 false 来“修复”此行为：

// menu-component.ts
constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}

但我不希望每次都销毁/创建我的所有组件。有什么解决办法吗？

这是Stackblitz 演示。要重现错误：

点击链接“Block #1”
刷新 Stackblitz 输出窗口
单击“Block #0”或“Details”：路线已更改，但消息仍为“details block1”
点击“信息”
重复步骤 1。-> 现在问题已解决。

编辑：我仍然有 Angular v6.1.3 的问题（我更新了Stackblitz 演示）。我尝试了@mast3rd3mon 提供的所有解决方案，但似乎没有任何解决方法。

标签： angularangular-routingangular6router-outlet

angular - Routerlink 导航后，Router-outlet 未更新

问题描述

解决方案

推荐阅读