typescript 自定义结构型指令

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了typescript 自定义结构型指令相关的知识,希望对你有一定的参考价值。

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

/**
 * Add the template content to the DOM unless the condition is true.
 */
@Directive({ selector: '[appUnless]'})
export class UnlessDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

  // 这里一个技巧:
  // 因为不推荐用Input别名来修饰输入变量,所以可以把这个输入变量用Input函数的形式来输入
  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

以上是关于typescript 自定义结构型指令的主要内容,如果未能解决你的问题,请参考以下文章

typescript 角度 - 自定义指令

typescript 自定义指令

typescript 属性指令 - 自定义

Vue.js 自定义指令使用 TypeScript 检测点击外部元素

编写自定义指令以在 AngularJS (TypeScript) 中向 ng-options 添加工具提示

编写自定义指令以将工具提示添加到AngularJS中的ng-options(TypeScript)