Nested Routing in angular2

Question

Hallo alle Angular2 Entwickler,

Hier ist eine Herausforderung, die ich bin vor und nicht zu wissen, wie es zu lösen.

Ich habe meine app.component.ts Datei wie folgt:

import { Component } from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 

import { LeftMenuComponent } from './left-menu.component'; 
import {HeaderComponent} from './header.component'; 
import {TotalContainer} from './container-total.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <myheader [display]="display"></myheader> 
    <router-outlet></router-outlet> 
    `, 
    directives:[HeaderComponent,TotalContainer,ROUTER_DIRECTIVES] 
}) 
export class AppComponent { 
    display = true; 
} 

ich die ganze Ansicht des Headers in header.component und in HTML geladen geschrieben haben. In der "header.component" lade ich die "left-menu.component". In der linken menu.component habe ich Hyperlinks, die in die "app.component" geladen werden sollen.

Der Fehler, den ich bekomme, ist, dass es "Kein Anbieter für den Router" gibt.

Ich fuhr fort, auf der angular.io Probe zu basieren, aber konnte es nicht lösen.

Hier ist, wie ich den Code schrieb. header.component.ts

import {Component, Input} from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 

import {LeftMenuComponent} from './left-menu.component'; 

@Component({ 
    selector:'myheader', 
    template:` 
     <nav class="navbar navbar-default"> 
      <div> 
      .... 
      </div> 
     </nav> 
     <left-menu [class.disp]="display"></left-menu> 

    `, 
    directives:[ROUTER_DIRECTIVES, LeftMenuComponent] 
}) 
export class HeaderComponent{ 
    @Input() display; 
} 

links menu.component.ts

import {Component} from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 

import {KeyEventsPlugin} from '@angular/platform-browser/src/dom/events/key_events'; 

@Component({ 
    selector:'left-menu', 
    template:` 
     <ul class="list-group"> 
      <li class="list-group-item"> 
       <span class="glyphicon glyphicon-share-alt"></span> 
       <span class="badge">14</span> 
        <a [routerLink]="['/followups']" routerLinkActive="active-link">Follow Ups</a> 
      </li> 
     </ul> 
    `, 
    directives:[ROUTER_DIRECTIVES] 
}) 
export class LeftMenuComponent{ 

} 

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router'; 
import {FollowUpsComponent} from '../components/followups.component'; 
import {TotalContainer} from '../components/container-total.component'; 

const routes: RouterConfig = [ 
    { 
     path:'total-container', 
     component:TotalContainer 
    }, 
    { 
     path:'followups', 
     component: FollowUpsComponent, 
    }, 
    { 
     path:'', 
     redirectTo:'/total-container', 
     pathMatch:'full' 
    }, 
    { 
     path:'**', 
     redirectTo:'/total-container' 
    } 
]; 


export const appRouterProviders = [ 
    provideRouter(routes) 
]; 

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './components/app.component'; 

import { appRouterProviders } from './routes/app.routes'; 
bootstrap(AppComponent,[ 
    appRouterProviders 
]); 

bootstrap(AppComponent); 

Can jemand hilft mir dabei.a

Answer 1

In Ihrem main.ts sieht es aus wie Sie versehentlich zweimal rufen Bootstrap:

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './components/app.component'; 

import { appRouterProviders } from './routes/app.routes'; 
bootstrap(AppComponent,[ 
    appRouterProviders 
]); 

bootstrap(AppComponent); <-----delete this! 

die zweite löschen und Sie sollten