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

我正在创建一个带有导航菜单的简单Angular应用程序。每个菜单项都有一个

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 { }

客户组件.html

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

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

<p>details block0</p>

<p>details block1</p>

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

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

这是我的建议。要复制错误，请执行以下操作：

点击链接“Block#1”

刷新Stackblitz输出窗口

单击“Block#0”或“Details”：路线已更改，但消息仍为“Details block1”

点击“信息”

重复步骤1。->现在问题解决了

---

---

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

查看您制作的演示后，您需要删除路由器链接的

。

部分<代码>。/customer变为

/customer

，

。/customer/info

变为

/customer/info

等

---

它可能只是演示，但请确保app.component.html文件看起来像

而不是

，因为标记需要有一个结束标记。

问题来自

菜单组件

。您必须插入

而不是

，因为

后面的组件在调用

菜单组件的组件中是init（本例中为
CustomerComponent
）

因此
menu.component.html
中的代码应该是：

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

------菜单路由器插座内的内容-------------

--------------------------------------------------------------------

将
CustomerDetailsBlock0组件
，
CustomerDetailsBlock1组件
合并到
CustomerDetailsBlockComponent
中，并使用路由参数：blockId'

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
                }
            }
        })
  }

}


我可能错了，但我认为路由器链接必须在绑定括号中<代码>[routerLink]=“./客户”

？也可能是因为您使用了

。/customer

而不是

/customer

，谢谢您的回复。我用app.component.html中的固定路由器出口标签和路由器链接中的“.”更新了演示。但问题仍然是一样的。您是否停止并重新运行了

ng serve

或您使用的任何东西？在尝试了其他操作后，我删除了

useHash

，因为我认为这可能会造成干扰。我也

RouterModule，

上面

RouterModule.forRoot（…）

我现在似乎无法重现您的问题我删除了useHash选项，但我仍然遇到同样的问题。我还尝试使用[RouterLink]=“['/customer/details/b0']”或[RouterLink]=“['/customer'，details'，b0']”更改路由器链接，但似乎没有解决任何问题。您是否在

RouterModule.forRoot（..）

上方添加了

路由模块？
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
                }
            }
        })
  }

}