angular - Angular routerLink 正在附加路由出口而不是替换

Question

我正在学习 Angular 和 TypeScript。现在我正在开发一个简单的应用程序，只是为了学习目的。我在使用 routeLink 时遇到问题。我的 routeLink 之一是向现有的 HTML 添加新的 HTML，而不是替换它。我有一个复杂的组件树视图和结构。

这是我的主要 app-routing.module：

const routes: Routes = [
    { path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard] }
];

我的 app.component.html：

<router-outlet></router-outlet>

所以我会有独立的 LayoutModule 和它的路由配置：

const routes: Routes = [
    {
        path: '',
        component: LayoutComponent,
        children: [
             { path: 'outcome', loadChildren: './outcome/outcome.module#OutcomeModule' }
        ]
    }
];

我的 layout.component html

<app-header></app-header>
<app-sidebar></app-sidebar>
<section class="main-container">
    <router-outlet></router-outlet>
</section>

同样，我将拥有结果模块及其路由配置。

这是我的结果-routing.module 配置：

 {
    path: '',
        component: OutcomeComponent,
        children: [
            { path: '', redirectTo: 'list' },
            { path: 'list', component: ListOutcomeComponent },
            { path: 'add', component: CreateOutcomeComponent }
        ]
  },

这是我的结果.component.html：

<div [@routerTransition]>
  <h2 class="text-muted">Page Title
    <small>This is small title</small>
  </h2>
  <router-outlet></router-outlet>
</div>

所以根据我的代码，如果我访问“结果/添加”和“结果/列表”，它将使用相应的组件。在此阶段之前，我的路线配置仍然可以正常工作。当我访问“outcome/add”url 时，outcome.component.html 中的 route-outlet 将替换为“outcome/list”的 CreateOutcomeComponent 和 ListOutcomeComponent。问题始于 ListOutComponent。

这是我的 create-outcome.component.html

<div>
    <h1>Add/create new outcome</h1>
</div>

这是我的 list-outcome.component.html

<div class="row">
<div class="col-md-12">
<a class="btn btn-primary" [routerLink]="['/outcome','add']">Add new outcome <i class="fa fa-plus"></i></a>
</div>
</div>

如您所见，我在 list-outcome.component.html 中创建了一个链接（routerLink），该链接导航到“结果/添加”。因此，如果我单击该链接，当前现有的整个内容应该被 CreateOutcomeComponent 的 HTML 内容替换，包括链接（锚点）本身。但是当我单击链接时，内容不会被替换，而是会附加或附加到现有内容中。

当我访问“结果/列表”时，这就是我所看到的：

如果我单击该按钮，它应该被 CreateOutcomeComponent 中的内容替换。但这发生了，当我这样做的时候。

正如您在屏幕截图中看到的那样，内容被添加到现有内容的顶部。但它应该被替换。为什么是这样？我该如何解决这个问题？

但是，当我直接从进入浏览器的 URL 访问“结果/添加”时，它按预期工作。