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

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

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

{ path: '', component: DashboardComponent }

更新1：

作为@GünterZöchbauer，我们应该为“一个没有孩子的空路径路线”添加pathMatch: 'full' 。

所以我们可以使用AppComponent方法（查看Günter的回答）：

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

或者，正如我在上面的答案中所说的DashboardComponent方法。

Answer 2

为什么会这样？

1）在您的应用程序入口点，很可能是main.ts，可以读取此行：

platformBrowserDynamic().bootstrapModule(AppModule);

这告诉angular引导模块 AppModule

2）在 AppModule 中，可以找到以下行：

bootstrap: [ AppComponent ]

这告诉angular引导组件 AppComponent 。这就是您看到第一个通讯录应用部分的原因。

3）现在， AppComponent 的模板包含<router-outlet>。路由器读取路由配置，相应地实例化 AppComponent 并在<router-outlet>之后立即注入。这就是您看到第二个通讯录应用部分的原因。

Answer 3

如果您的路径空路径没有孩子，请使用pathMatch: 'full'

而不是

{ path: '', component: AppComponent },

使用

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

和@SrAxi说的话。

Answer 4

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

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

代替：

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

Answer 5

答案对我不起作用。

路线

{ path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule'},

仪表板模块

NgModule({
  imports: [
    SharedModule,
    DashboardRoutingModule,
    PipesModule.forRoot()
  ],
  declarations: [
    MyDashboardComponent,
    DashboardParentComponent
  ],
  providers: [
    ApiService
  ],
})
export class DashboardModule { }