组件模板内容在angular2中重复两次

Question

页面加载组件内容显示两次时，我也尝试了另一个组件，但未获得实际输出。提前致谢

这是我的app.module.ts

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { Routes, RouterModule } from '@angular/router';

    import { AppComponent }  from './app.component';

    var routes : Routes = [
        {
            path: 'home',
            component: AppComponent
        },  
        { 
            path: '',
            pathMatch: 'full',
            redirectTo: 'home'

         },

    ]

    @NgModule({
      imports:      [ BrowserModule, RouterModule.forRoot(routes) ],
      declarations: [ AppComponent, AppComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

app.component.ts

    import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      template: `<h1>Hello {{name}}</h1><router-outlet></router-outlet>`,
    })
    export class AppComponent  { name = 'Angular'; }

Answer 1

因为你有这个

var routes : Routes = [
    {
        path: 'home',
        component: AppComponent
    },  
    { 
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'

     },

]

和这个

template: `<h1>Hello {{name}}</h1><router-outlet></router-outlet>`,

因此，当您导航到/（root）时，它将重定向到home，并且您将获得2条指向相同组件的路线AppComponent

尝试创建HomeComponent，然后home使用HomeComponent不AppComponent