Warum wird meine angular2 App zweimal initialisiert?

Question

Bitte sagen Sie mir, wo mein Fehler ist, meine App führt den AppComponent-Code zweimal aus. Ich habe 5 Dateien:

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> 

und letzte 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() { 
    } 
} 

wenn ich/Berichte gehen sollte ich zwei Links "List" sehen und "Erstellen" aber innerhalb von app-root-Tag sehe ich die sekundäre app-root-Tag (auf dem Bild) screenshot Und meine Frage ist: warum?

Answer 1

Da Ihre Standardroute Punkte auf AppComponent, so dass Ihre Route die Rendering ist AppComponent innerhalb der AppComponent:

{path:'', component: AppComponent }, 

Sie sollten wahrscheinlich eine DashboardComponent oder HomeComponent setzen dort.