Angular 附加到路由器出口而不是替换内容答案

【问题标题】：Angular appends to router-outlet instead of replacing contentAngular 附加到路由器出口而不是替换内容
【发布时间】：2021-01-31 12:38:27
【问题描述】：

正在学习 Angular，当我使用 routerLink 或 this.router.navigate 时，组件只是附加到 router-outlet 而不是替换内容。这是我的代码

应用路由模块

const routes: Routes = [
  {path: 'Billing', component: BillingComponent},
  {path: 'BillDisplay', component: BillDisplayComponent}
];

app.component.module.html

<a routerLink="/Billing">
    Go to Billing
</a>
<router-outlet>
</router-outlet>

当我单击呈现页面上的链接时，我得到的计费页面搞砸了 Jquery，但我尝试直接在浏览器中提供相同的 URL，http://localhost:4200/billing，页面显示正常.另外，我有一个结算按钮，

billing.component.html

<input type="button" (click)="navigateTo()" value="Submit">

billing.component.ts

navigateTo(): void {
    this.router.navigate(['/BillDisplay']);
  }

现在，当我单击按钮时，billdisplay 的内容会显示在附加到帐单的同一页面中，如下所示。

contents of app.component.html
contents of billing.component.html
contents of billdisplay.html

为什么导航没有替换内容？

【问题讨论】：

【解决方案1】：

试试这个

 this.router.navigateByUrl('/', { skipLocationChange: true }).then(() =>{
          this.router.navigate(['/BillDisplay']);
        })

【讨论】：