Routerlink 导航后，Router-outlet 未更新

Question

我正在创建一个带有导航菜单的简单 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 { }

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 被更新并显示了预期的组件。

当我在路由为#/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 demo。重现错误：

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

---

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

Answer 1

看完你做的demo，你需要去掉路由器链接的..部分。 ../customer 变成 /customer，../customer/info 变成 /customer/info 等等。

它可能只是演示，但请确保 app.component.html 文件看起来像 <router-outlet></router-outlet> 而不是 <router-outlet>，因为标签需要有一个结束标签。

Answer 2

问题来自MenuComponent。您必须插入<ng-content></ng-content> 而不是<router-outlet></router-outlet>，因为<router-outler></router-outlet> 后面的组件在调用MenuComponent 的组件中是初始化的（本例中为CustomerComponent）。

所以menu.component.html 中的代码应该是：

<p>------------- Content inside menu router-outlet -------------</p>
<ng-content></ng-content>
<p>--------------------------------------------------------------------</p>

Answer 3

使用路由参数“:blockId”将CustomerDetailsBlock0Component、CustomerDetailsBlock1Component 合并到CustomerDetailsBlockComponent

CustomerDetailsBlockComponent{
   
  blockId: number

  constructor(private router Router){
        this.router.events.subscribe(event=>{
            if (event instanceof ActivationEnd && event.snapshot) {
                let blockId = +event.snapshot.paramMap.get('blockId')
                if (blockId) {
                    this.blockId = blockId
                    //update other angular bindings
                }
            }
        })
  }

}