angular4设置全局变量_Angular 4：用作全局变量的指令

使用指令而不是ngIf怎么样，这样你只需要将你的服务注入到指令中，当你在组件中使用时，它也很好用，DRY和最小标记。

就像是

@Directive({

selector: '[showIfLoggedIn]'

})

export class ShowIfLoggedInDirective implements OnInit {

constructor(

private templateRef: TemplateRef,

private viewContainerRef: ViewContainerRef

) { }

ngOnInit() {

var isLoggedIn = false;//TODO use service here and inject into constructor.

if( isLoggedIn ) {

this.viewContainerRef.createEmbeddedView(this.templateRef);

} else {

this.viewContainerRef.clear();

}

}

}然后用

I am logged in

并切换一个班级

@Directive({

selector : '[applyClassIfLoggedIn]'

})

export class ApplyClassIfLoggedIn implements OnInit {

@Input('applyClassIfLoggedIn') className;

constructor(

private ele: ElementRef,

private renderer: Renderer2

) { }

ngOnInit() {

var isLoggedIn = true;//TODO use service here.

if( isLoggedIn ) {

this.renderer.addClass(this.ele.nativeElement, this.className);

}

}

}然后

Red if logged in

Plunkr here