Angular自定义structural指令的一个例子

The is a syntax element recognized by the Angular parser. It’s not a directive, component, class, or interface. It’s more like the curly braces in a JavaScript if-block:

if (someCondition) {
  statement1;
  statement2;
  statement3;
}

Without those braces, JavaScript would only execute the first statement when you intend to conditionally execute all of them as a single block. The satisfies a similar need in Angular templates.

编写一个功能和NgIf相反的指令：

源代码如下：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

/**
 * Add the template content to the DOM unless the condition is true.
 */

/* The directive's selector is typically the directive's 
attribute name in square brackets, [appUnless]. The brackets define a CSS attribute selector.
*/
@Directive({ selector: '[appUnless]'})
export class UnlessDirective {
  private hasView = false;

  /*
  A simple structural directive like this one creates an
  embedded view from the Angular-generated <ng-template> and
   inserts that view in a view container adjacent to the directive's original <p> host element.
  */

  /*
  You'll acquire the <ng-template> contents with a TemplateRef and access the view container through a ViewContainerRef.
  */
  constructor(
    // 访问<ng-template>内容
    private templateRef: TemplateRef<any>,
    // 访问view container
    private viewContainer: ViewContainerRef) { }

    /*
    The directive consumer expects to bind a true/false 
    condition to [appUnless]. That means the directive needs an appUnless property, decorated with @Input
    */
  @Input() set appUnless(condition: boolean) {
    // 如果condition不满足才显示view
    /*
    Angular sets the appUnless property whenever the value of 
    the condition changes. Because the appUnless property does work, it needs a setter.
    */
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

在App module里的declarations区域导入新建的Directive：

在Component HTML里消费这个自定义指令：

<h2 id="appUnless">UnlessDirective</h2>
<p>
  The condition is currently
  <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
  <button
    (click)="condition = !condition"
    [ngClass] = "{ 'a': condition, 'b': !condition }" >
    Toggle condition to {{condition ? 'false' : 'true'}}
  </button>
</p>
<p *appUnless="condition" class="unless a">
  (A) This paragraph is displayed because the condition is false.
</p>

<p *appUnless="!condition" class="unless b">
  (B) Although the condition is true,
  this paragraph is displayed because appUnless is set to false.
</p>

最后的效果：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":