angular4.0 创建结构指令

转载自 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;
}