在 angular 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

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

在 angular 2 中将组件从子指令传递到父指令

Pass a component from child to a parent directive in angular 2

angular2-directives

angular2-routing

angular