Angular2 Komponente Kommunikation mit Router-Ausgang

Question

Entweder bekomme ich nicht das Muster oder mein Design ist falsch.

Mit angular2-beta0, Maschinenschrift

Grundsätzlich Ich habe eine sehr einfache Anwendung mit einem Wurzelkomponente ein Router, der auf einigen Seiten Hauptansichten aufgebaut und steuert dann habe ich einen Sub-Router die Subviews auf diese Komponente zu steuern, .

Woran ich zu kämpfen habe ist, wie man Dinge mit der Kommunikation zwischen Komponenten strukturiert. Mit der Anwendung, wie sie momentan ist, ist sie in einer Weise angeordnet, die für mich logisch ist, die Ansichten der Hauptroute haben nichts gemeinsam und in den Unterroutenansichten haben sie alle die gleiche Seitennavigation und Header. Das Problem, das ich habe, scheint zu der übergeordneten Ansicht einer Unteransicht zu kommunizieren. Es scheint so zu sein, dass ein Kind in einem Router-Outlet nicht die Abhängigkeit von der Elternkomponente bekommen kann. Ich habe nach benutzerdefinierten Ereignissen gesucht, aber diese scheinen nur zu funktionieren, wenn sie an eine Vorlage gebunden sind. Die einzige andere Option scheint ein Dienst zu sein, aber das scheint mir gebrochen zu sein. Idealerweise möchte ich, dass die Elternkomponente den Zustand der Unterkomponenten kontrolliert.

Jeder, wie einige Beispiel-Code ...

@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) { 

    } 
} 

Der Fehler Ich bin mit DI immer das ist ...

AUSNAHME: Es können nicht alle Parameter für StateClear (undefined) lösen. Stellen Sie sicher, dass alle einen gültigen Typ oder Anmerkungen haben.

Kein Fehler mit dem Ereignis, da ich nicht sehe, wie außerhalb der Vorlage zu hören ist.

Answer 1

Was Sie also tun sollten, ist, anstatt DI mit Elternkomponenten zu verwenden.

Wie machst du hier:

export class StateClear { 

    constructor(main: Main) { 

    } 
} 

Sie könnten nur einen Dienst erstellen möchten, dass die Daten, die Sie innerhalb Ihrer Route/Komponentenebene gemeinsam nutzen möchten abwickelt.

@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)); 
    } 
} 

Diese UserSettingsService kann nun als Anwendungsebene Dienst in der Bootstrap hinzugefügt wird und kann dann in alle Routen geleitet werden Sie mit ihm teilen wollen. dependency-injection-in-angular-2

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

Dann tun Sie das folgende Zugriff auf diese Daten innerhalb Ihrer Komponente zu gewinnen.

@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; 
    } 
}