Angular 2 Rc.1 router nie ładuje "/" komponent

Question

Próbuję użyć nowego routera z wydania rc.0. (Właściwie używając rc.1) Jednak nie mogę dostać gniazda, aby załadować "Witamy "komponent.

Oto 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 { 


} 

Oto main.ts

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

bootstrap(AppComponent, [ROUTER_PROVIDERS]); 

nie jestem pewien, co ja brakujący, ścieżka do/powinien index.html ma także podstawową wartość ref ustawioną na "/" ng za pośrednictwem źródła, aby zobaczyć, co brakuje, ale nie znajduje nic.

Answer 1

Jest to znany problem https://github.com/angular/angular/issues/8409

Jeśli masz konfigurację trasy bez żadnych linków routera i nie wstrzykiwać router, początkowe nawigacja nie występuje.

Tak więc należy wprowadzić Router lub dodać <a [routerLink]="...">, dopóki ten problem nie zostanie rozwiązany.

Answer 2

Wygląda konstruktor AppComponent potrzebne to:

export class AppComponent { 

    constructor(private _router:Router){ 

    } 

} 

Nie wiem, dlaczego, jeśli ktoś ma odpowiedzi na to pytanie?

Answer 3

Trzeba jeszcze wprowadzić go za pomocą:

constructor(private _router:Router) { } 

To się nazywa zależność wtrysku, znany również jako wstrzyknięcie konstruktora. Twoja klasa zależy od routera. W górnej części kodu zadeklarowałeś, gdzie Angular może znaleźć zależność za pomocą instrukcji import. Nadal musisz utworzyć instancję (wstrzyknąć) usługę, zanim będzie można jej użyć. To właśnie deklarujesz w konstruktorze.

Więcej informacji o Dependency Injection here

Answer 4

Powodem jest fakt, że nigdy nie zostanie Router instancja w swoim przykładzie. Dzieje się tak, ponieważ dyrektywa RouterOutlet nie zależy teraz od usługi Router.

Po utworzeniu instancji Router następuje obserwacja początkowego adresu URL i aktywowanie początkowych tras.

Poprawka na chwilę obecną polega na wymuszeniu instancji routera poprzez ręczne wstrzyknięcie Router. Lub - jeśli masz w szablonie routerLink s - stanie się to automatycznie jako routerLinkczy zależy od Router.