爲什麼我的angular2應用程序初始化兩次？

Question

請告訴我我的錯誤在哪裏，我的應用程序運行兩次AppComponent代碼。 我有5個文件：

main.ts：

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { enableProdMode } from '@angular/core'; 
import { AppComponent, environment } from './app/'; 
import { APP_ROUTER_PROVIDERS } from './app/routes'; 
import {HTTP_PROVIDERS} from '@angular/http'; 
import {ServiceProvider} from "./app/providers/app.service.provider" 

if (environment.production) { 
    enableProdMode(); 
} 
bootstrap(AppComponent, [ServiceProvider, APP_ROUTER_PROVIDERS, HTTP_PROVIDERS]); 

routes.ts：

import {provideRouter, RouterConfig} from '@angular/router'; 
import {AppComponent} from "./app.component"; 
import {ReportDetailComponent} from "./component/AppReportDetailComponent"; 
import {ReportsListComponent} from "./component/AppReportListComponent"; 
import {ReportCreateComponent} from "./component/AppReportCreateComponent"; 


export const routes:RouterConfig = [ 
    { 
     path: 'reports', 
     children: [ 
     {path: ':id', component: ReportDetailComponent}, 
     {path:'', component: AppComponent }, 
     {path: 'create', component: ReportCreateComponent}, 
     {path: 'list', component: ReportsListComponent}, 
     ] 
    } 
    ]; 
export const APP_ROUTER_PROVIDERS = [provideRouter(routes)]; 

app.component：

import {Component, OnInit} from '@angular/core'; 
import {ReportNavComponent} from "./component/AppReportNavComponent"; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    templateUrl: 'tpl/app.component.html', 
    styleUrls: ['app.component.css'], 
    directives: [ROUTER_DIRECTIVES, ReportNavComponent] 

}) 
export class AppComponent { 
    constructor() { 
    } 
} 

app.component.html：

<report-nav></report-nav> 
<router-outlet></router-outlet> 

和最後AppReportNavComponent.ts：

import {Component} from "@angular/core"; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 
@Component({ 
    selector: "report-nav", 
    directives: [ROUTER_DIRECTIVES], 
    template: `<nav> 
    <a [routerLink]="['/list']">List</a> 
    <a [routerLink]="['/create']">Create new</a> 
</nav>` 
}) 

export class ReportNavComponent { 
    constructor() { 
    } 
} 

如果我去/報告我應該看到兩個鏈接 「列表」 和 「創建」 但在應用程序根標籤內，我看到次要應用程序根標籤（圖片上） screenshot 而我的問題是：爲什麼？

Answer 1

因爲你的默認路由指向AppComponent，使您的路線呈現AppComponent內AppComponent：

{path:'', component: AppComponent }, 

你或許應該放在那裏一DashboardComponent或HomeComponent。