以角度 2 将组件从子组件传递给父指令

Question

这是我的父组件：

@Component({
    selector : "app",
    template : '        
            <app-header></app-header>
            <top-navigation></top-navigation>
            <router-outlet></router-outlet>    
            <app-footer></app-footer>                
            <page-js-rersources></page-js-rersources>',
    directives : [AppHeader, AppFooter]
})
@RouteConfig([
    {path: '/', name: "UserHome", component: LandingPage, useAsDefault: true },
    {path: '/login', name: "Login", component: LoginSignUp },
    {path: '/splash', name: "SplashBuildup", component: Splash },
    {path: '/home', name: "HomeBuildup", component: Home }        
])
export class UserLayoutBuildUp{

    constructor(){

    }

}

这是我的子组件：

@Component({
    templateUrl: "splash.tmpl.htm",
})
export class Splash{

}

这是我的顶级导航组件：

@Component({
    selector: "top-navigation",
    templateUrl: "topNavigation.tmpl.htm"
})
export class TopNavigation{

}

我想在 UserLayoutBuildUp 组件的 top-navigation 选择器中包含我的顶部导航组件。

我已经尝试过 Angular 2 文档，但无法弄清楚有关将组件注入顶级选择器的任何信息。

Answer 1

一种方法是使用您在bootstrap 注入的服务。然后使用路由器生命周期钩子来控制这个服务。这将导致如下结果：

前面有未经测试的代码..

配置服务

export class ConfigurationService { //or whatever name you'd like

    public showTopNavigation: boolean = false;  
    //... use it for other settings you might come across
}

引导

bootstrap(AppComponent, [ConfigurationService]); //And other things

UserLayoutBuildUp

@Component({
    selector : "app",
    template : `        
            <app-header></app-header>
            <top-navigation *ngIf="_configuration.showTopNavigation"></top-navigation>
            <router-outlet></router-outlet>    
            <app-footer></app-footer>                
            <page-js-rersources></page-js-rersources>`,
    directives : [AppHeader, AppFooter]
})
@RouteConfig([
    {path: '/', name: "UserHome", component: LandingPage, useAsDefault: true },
    {path: '/login', name: "Login", component: LoginSignUp },
    {path: '/splash', name: "SplashBuildup", component: Splash },
    {path: '/home', name: "HomeBuildup", component: Home }        
])
export class UserLayoutBuildUp{

    constructor(private _configuration: ConfigurationService){}

}

SplashComponent

@Component({
    templateUrl: "splash.tmpl.htm",
})
export class SplashComponent {

    constructor(private _configuration: ConfigurationService){}

    routerOnActivate() : void {
       this._configuration.showTopNavigation = true;
    }

    routerOnDeactivate() : void {
       this._configuration.showTopNavigation = false; 
    }
}