Question

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

这是我的app.module.ts

     DATE          ID present

  2017-03-20 16:01         1
  2017-03-20 16:02   1, 2, 3
  2017-03-20 16:03      1, 2
  2017-03-20 16:10         1
  2017-03-20 16:30         1

app.component.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 { }

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

组件模板内容以angular2重复两次

1 个答案: