转载自 http://www.ngui.cc/news/show-137.html
指令的功能
该指令实现 ngIf 指令相反的效果,当指令的输入条件为 Falsy 值时,显示DOM元素。
指令的实现
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
<@Directive({
selector: '[exeUnless]' }) export class UnlessDirective {
@Input('exeUnless') set condition(newCondition: boolean) {
if (!newCondition) { this.viewContainer.createEmbeddedView(this.templateRef);
} else { this.viewContainer.clear();
}
}
constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {
}
}
指令的应用
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2 *exeUnless="condition">Hello, Semlinker!</h2>
`,
})
export class AppComponent {
condition: boolean = false;
}