Yönlendirici çıkışlı

Question

Angular2 bileşen iletişimi Ya desen almıyorum veya tasarımım yanlış. angular2-beta0 kullanma

, typescript Ben alkolsüz bileşeni ana manzarasını kontrol eder ve daha sonra bazı sayfalarda O bileşeni subviews kontrol etmek için bir alt yönlendirici sahip bir yönlendirici ile bir çok temel bir uygulama kurdunuz Temelde

.

Şu anda uğraştığım şey, bileşenlerle iletişim kurarak şeyleri nasıl yapılandırılacağıdır. Şu andaki uygulama ile mantıklı bir mantığa sahip olacak şekilde düzenlendiğinde, ana yolun görüşlerinin hiçbir ortak noktası yoktur ve alt rota görünümlerinde hepsi aynı yan navigasyon ve üstbilgileri paylaşırlar. Benim alt problemin ana görünümüne geri iletişim kuruyor gibi görünüyor. Bir çocuk bir yönlendirici çıkışında olduğu için ana bileşenin bağımlılığını alamıyor gibi görünüyor. Özel etkinliklere baktım ama bunlar sadece bir şablona bağlı olarak çalışıyor gibi görünüyor. Diğer tek seçenek bir hizmet gibi gözüküyor ama bu benim için ideal olarak kırılmış gibi görünüyor Ana bileşenlerin alt bileşenlerin durumunu kontrol etmesini istiyorum.

bazı örnek kod ...

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

    } 
} 

Ben DI ile alıyorum hata bu ...

İSTİSNA olan herhangi nasıl: (tanımsız) StateClear için tüm parametreleri çözülemiyor. Hepsinin geçerli türde veya ek açıklamalara sahip olduğundan emin olun.

Şablonun dışında nasıl dinleyeceğimi göremediğim için etkinlikle ilgili bir hata yok.

Answer 1

Yapmak istediğiniz şey, DI ana bileşenleri kullanmak yerine kullanmaktır. Sizin gibi

burada yapıyoruz:

export class StateClear { 

    constructor(main: Main) { 

    } 
} 

Sadece size rota/bileşen seviyeleri içinde paylaşmak istediğiniz verileri işleyen bir hizmet oluşturmak isteyebilirsiniz.

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

Bu UserSettingsService

artık bir uygulama düzeyinde hizmet olarak bootstrap eklenebilir ve daha sonra paylaşmak isteyeceksiniz tüm yolları içine geçirilebilir. dependency-injection-in-angular-2

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

Öyleyse neye sizin bileşeni içinde bu verilere erişmek için aşağıdaki.

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