为什么我的angular2应用程序初始化两次？

请告诉我我的错误在哪里，我的应用程序运行两次AppComponent代码。我有5个文件：为什么我的angular2应用程序初始化两次？

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 而我的问题是：为什么？

来源

2016-07-14 slowkazak

因为你的默认路由指向AppComponent，使您的路线呈现AppComponent内AppComponent：

{path:'', component: AppComponent },

你或许应该放在那里一DashboardComponent或HomeComponent。

来源

2016-07-14 15:23:38 rinukkusu

那么，我应该使用dashboardcomponent中的router outlet和dashboardcomponent调用app.component？ – slowkazak

不，反之亦然。 'AppComponent'是你的应用程序的入口点。并且该仪表板需要在路由配置中设置：'{path：'，component：DashboardComponent}， – rinukkusu

如果路径没有空路径并且没有子路由，那么该路由应该具有'pathMatch：'full' –

为什么我的angular2应用程序初始化两次？

回答

相关问题