Routerlink导航后路由器出口未更新

我正在创建一个带有导航菜单的简单角度应用程序。每个菜单项都有 Routerlink 在页面之间导航。以下是页面:

• 家( #/home )
• 客户/信息( #/customer/info )
• 客户/详细信息( #/customer/details )
• 客户/详细信息/b0( #/customer/details/b0 )
• 客户/详细信息/b1( #/customer/details/b1 )

相关代码:

应用模块.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 { }

customer-component.html客户组件

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

customer-details-component.html网站

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

customer-details-block0-component.html网站

<p>details block0</p>

customer-details-block1-component.html网站

<p>details block1</p>

menu-component.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 将更新并显示预期的组件。

当路线是 #/客户/详细信息/b1 (或者如果我直接点击它,而不点击父菜单项):组件是好的,但是我的菜单坏了。如果我点击链接进入 #/客户/详细信息/b0 路由已更改,但路由器出口未更新 b1 组件仍然显示,并且 b0 不是。 当我单击另一个菜单项时,这个问题被修复,其中的URL不是以“customer/details”开头的,例如,如果我单击“Info”,那么这个问题就消失了。

我想是组件的问题 customer-details 作为相同的实例和角度重用它。但是为什么子组件没有改变呢?

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

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

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

这是 Stackblitz demo . 要重现错误:

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

编辑: 我仍然有关于AngularV6.1.3的问题(我更新了 Stackblitz演示 ). 我尝试了@mast3rd3mon提供的所有解决方案,但似乎没有解决问题。