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)