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

Question

This is my parent component :

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

    }

}

This is my child component:

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

}

And this is my top navigation component:

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

}

I want to include my top navigation component when the splash router component is active to the UserLayoutBuildUp component's top-navigation selector.

I have tried the Angular 2 docs but not able to figure out anything about injecting component to top level selector.

Answer 1

One way to do it is to use a service which you inject at bootstrap . And then use router lifecycle hooks to control this service. This will result in something like this:

untested code ahead..

ConfigurationService

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