Angular `<router-outlet>` 显示模板两次

Question

我正在使用 angular4 并尝试创建路由器链接。路由器链接工作，但显示模板两次。

下面是我在组件中的代码：

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
  <h1>Contacts App</h1>
    <ul>
      <li><a [routerLink]="['/facebook/top']">Contact List</a></li>
    </ul>
    <router-outlet></router-outlet>
    `
})
export class AppComponent {
    constructor(
        private route: ActivatedRoute,
        private router: Router,
    ){ }

    gotoDetail(): void {
        this.router.navigate(['facebook/top']);
    }
}

我的路线：

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'facebook/top',  component: CommentComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

Answer 1

在你的 app-routing.module.ts 文件中尝试使用：

{path: '' , redirectTo: 'AppComponent', pathMatch: 'full'}

代替：

{ path: '', component: AppComponent, pathMatch: 'full' }

Answer 2

您的默认路由指向AppComponent，因此您的路由在AppComponent 内呈现AppComponent。

为此创建DashboardComponent 或HomeComponent。然后做：

{ path: '', component: DashboardComponent }

更新 1：

正如@GünterZöchbauer 提到的，我们应该为“没有孩子的空路径路径”添加pathMatch: 'full'。。

所以我们可以使用AppComponent 方法（检查Günter's answer）：

{ path: '', component: AppComponent, pathMatch: 'full' }

或者，我在上面的回答中提到的DashboardComponent 方法。

Answer 3

为什么会这样？

1) 在您的应用程序入口点，很可能是main.ts，可以看到这一行：

platformBrowserDynamic().bootstrapModule(AppModule);

这告诉 Angular 引导模块 AppModule

2) 在AppModule中，可以找到这一行：

bootstrap: [ AppComponent ]

这告诉 Angular 引导组件 AppComponent。这就是为什么您会看到第一个 Contacts App 部分，因为 AppComponent 的 html 模板是：

<h1>Contacts App</h1>
<ul>
    <li><a [routerLink]="['/facebook/top']">Contact List</a></li>
</ul>
<router-outlet></router-outlet>

3) 但是，AppComponent 的模板也包含<router-outlet>。路由器读取路由配置，相应地创建 AppComponent 的新实例并将其注入元素 <router-outlet> 之后。这就是为什么您会看到第二个 Contacts App 部分。

Answer 4

如果您有一个没有子节点的空路径路由，请使用pathMatch: 'full'

而不是

{ path: '', component: AppComponent },

使用

{ path: '', component: AppComponent, pathMatch: 'full' },

以及@SrAxi 所说的话。