Router Angolare 2 Rc.1 non caricando il componente "/"

Question

Sto tentando di utilizzare il nuovo router dalla versione rc.0 (in realtà utilizzando rc.1) Tuttavia non riesco a caricare la presa "Benvenuti "componente.

Ecco le app.component.ts

import { Component } from '@angular/core'; 
import { Routes, ROUTER_DIRECTIVES} from '@angular/router'; 
import { HeaderComponent } from './common/header.component'; 
import { WelcomeComponent } from './common/welcome.component'; 
import { FooterComponent } from './common/footer.component'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <header-component> </header-component> 
     <router-outlet> </router-outlet> 
    <footer-component> <footer-component> 
    `, 
    directives: [ROUTER_DIRECTIVES, HeaderComponent, WelcomeComponent, FooterComponent] 
}) 

@Routes([ 
    {path: "/", component: WelcomeComponent} 
]) 

export class AppComponent { 


} 

Ecco le main.ts

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

bootstrap(AppComponent, [ROUTER_PROVIDERS]); 

non sono sicuro di quello che un mancante, il percorso per/dovrebbe lavoro. index.html ha anche il riferimento di base impostato su "/" Sono stato diggi attraverso la fonte per vedere cosa mi manca ma non trovando nulla.

Answer 1

Questo è un problema noto https://github.com/angular/angular/issues/8409

Se si dispone di messa a punto percorsi senza alcun legame router e non si inietta il router, navigazione iniziale non si verifica.

Quindi, o si inietta il Router o aggiungere <a [routerLink]="..."> fino a quando questo problema è stato risolto.

Answer 2

Sembra che il costruttore per AppComponent bisogno di questo:

export class AppComponent { 

    constructor(private _router:Router){ 

    } 

} 

Non certo perché, se qualcuno ha una risposta per questo?

Answer 3

hai ancora bisogno di iniettare utilizzando:

constructor(private _router:Router) { } 

che si chiama Dependency Injection, noto anche come iniezione costruttore. La tua classe dipende dal router. Nelle prime righe del tuo codice hai dichiarato dove Angular poteva trovare la dipendenza con una dichiarazione import. È comunque necessario istanziare (iniettare) il servizio prima di poterlo utilizzare. Questo è ciò che dichiari nel costruttore.

Maggiori informazioni su Dependency Injection here

Answer 4

Il motivo è perché il Router mai in realtà viene creata un'istanza nel tuo esempio. Ciò accade perché la direttiva RouterOutlet non dipende dal servizio Router.

Quando il Router viene istanziato, è lì che osserva l'URL iniziale e attiva i percorsi iniziali.

La correzione per il momento è di forzare l'istanziazione del router iniettando il Router manualmente. Oppure, se nel modello si dispone di routerLink, l'operazione avverrà automaticamente come routerLinkda dipende da Router.