[英]Pass a component from child to a parent directive in angular 2
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. 当启动路由器组件对UserLayoutBuildUp组件的顶部导航选择器处于活动状态时,我想包括我的顶部导航组件。
I have tried the Angular 2 docs but not able to figure out anything about injecting component to top level selector. 我已经尝试过Angular 2文档,但无法弄清楚有关将组件注入顶层选择器的任何信息。
One way to do it is to use a service which you inject at bootstrap
. 一种实现方法是使用您在bootstrap
注入的服务。 And then use router lifecycle hooks to control this service. 然后使用路由器生命周期挂钩来控制此服务。 This will result in something like this: 这将导致如下所示:
untested code ahead.. 未经测试的代码。
ConfigurationService 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 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 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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.