Comunicazione componente angolare2 con router-outlet

Question

O non riesco a ottenere il modello o il mio disegno è sbagliato.

Uso angular2-beta0, dattiloscritto

Fondamentalmente ho configurato un'applicazione molto semplice con un componente principale di un router che controlla viste principali e poi su alcune pagine ho un router secondario per controllare le subviews su tale componente .

Quello che mi sembra di essere in difficoltà è come strutturare le cose con la comunicazione tra i componenti. Con l'applicazione così com'è al momento è organizzata in un modo che per me ha senso logico, le viste del percorso principale non hanno nulla in comune e nelle viste della strada secondaria condividono tutte la stessa navigazione laterale e le stesse intestazioni. Il problema che ho sembra è tornare alla vista principale di una sottoview. Sembra che sia un bambino in un router-outlet che non può ottenere la dipendenza del componente principale. Ho guardato eventi personalizzati ma questi sembrano funzionare solo se legati a un modello. L'unica altra opzione sembra essere un servizio, ma a me sembra spezzato perché idealmente voglio che il componente genitore abbia il controllo dello stato dei componenti secondari.

Qualsiasi come qualche esempio di codice ...

@Component({ 
    selector: 'app' 
}) 

@View({ 
    template: '<router-outlet></router-outlet>', 
    directives: [ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    { path: '/', as: 'Login', component: LoginForm }, 
    { path: '/main/...', as: 'Main', component: Main} 
]) 

class App { 

    constructor(private _router: Router) { 
    } 

} 

bootstrap(App, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' })]); 


@Component({ 
    selector: 'main' 
}) 

@View({ 
    templateUrl: '/client/main/main.html', 
    directives: [ROUTER_DIRECTIVES, NgClass, Menu, Main] 
}) 

@RouteConfig([ 
    { path: '/', as: 'Clear', component: StateClear }, 
    { path: '/offer', as: 'Offer', component: StateOffer } 
]) 

export class Main { 

    constructor(private _router: Router) { 

    } 

} 

@Component({ 
    selector: 'state-clear' 
}) 

@View({ 
    templateUrl: '/client/bookings/state-clear.html' 
}) 

export class StateClear { 

    constructor(main: Main) { 

    } 
} 

L'errore che sto ottenendo con DI è questo ...

ECCEZIONE: Impossibile risolvere tutti i parametri per StateClear (non definito). Assicurati che abbiano tutti un tipo o annotazioni validi.

Nessun errore con l'evento poiché non vedo come ascoltare all'esterno del modello.

Answer 1

Quindi ciò che si vorrebbe fare è invece di usare DI con i componenti principali.

come state facendo qui:

export class StateClear { 

    constructor(main: Main) { 

    } 
} 

si potrebbe desiderare solo di creare un servizio che gestisce i dati che si desidera condividere con i tuoi livelli di percorso/componenti.

@Injectable() 
export class UserSettingsService { 
    // Application wide settings/config should be instatiated here 
    // with a call from OnInit we can set all of these values. 
    constructor() { } 

    public iId: number; 
    public userName: string; 
    public isLoggedIn: boolean; 
    public firstName: string; 
    public lastName: string; 
    public permissions: string[]; 
    getUser(userName:string) { 
    // with an AJAX request get user Auth. 
    return Promise.resolve(api.getUserAuth(userName)); 
    } 
} 

Questo UserSettingsService possono ora essere aggiunti al vostro bootstrap come un servizio di livello di applicazione e può quindi essere passato attraverso tutti i percorsi che si vuole condividere con. dependency-injection-in-angular-2

bootstrap(App, [ROUTER_PROVIDERS, UserSettingsService, provide(APP_BASE_HREF, { useValue: '/' })]); 

Quindi effettuare le seguenti operazioni per ottenere l'accesso a tali dati in un componente.

@Component({ 
    selector: 'state-clear' 
}) 

@View({ 
    templateUrl: '/client/bookings/state-clear.html' 
}) 

export class StateClear { 
    userName:string; 
    userId:int; 
    isLoggedIn:boolean; 
    constructor(private _userSettings: UserSettingsService) { 
     // Not that you would do this here again but just for an example that the data is retrievable here. 
     this.userName = this._userSettings.userName; 
     this.userId = this._userSettings.iId; 
    } 
}