为什么我的angular2应用初始化两次? [英] Why does my angular2 app initialize twice?

问题描述

请告诉我我的错误在哪里，我的应用程序两次运行AppComponent代码. 我有5个文件:

Please tell me where my mistake is, my app is running the AppComponent code twice. I have 5 files:

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)];

应用组件:

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

如果我转到/reports，我应该看到两个链接列表"和创建" 但是在app-root标记内，我看到了辅助app-root标记(在图片上) 屏幕截图 我的问题是:为什么?

if I go to /reports I should see two links "List" and "Create" but inside app-root tag I see the secondary app-root tag (on the picture) screenshot And my question is: why?

推荐答案

因为您的默认路由指向AppComponent，所以您的路由正在AppComponent内渲染AppComponent:

Because your default route points to AppComponent, so your route is rendering the AppComponent inside the AppComponent:

{path:'', component: AppComponent },

您可能应该在其中放置DashboardComponent或HomeComponent.

You probably should put there a DashboardComponent or HomeComponent.

这篇关于为什么我的angular2应用初始化两次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！