angular4.0 创建结构指令

最新推荐文章于 2022-06-08 15:59:47 发布

1322300062

最新推荐文章于 2022-06-08 15:59:47 发布

阅读量541

点赞数

分类专栏： angular 文章标签： angular 指令

angular 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种在Angular中创建自定义指令的方法，通过实现exeUnless指令来展示DOM元素，其效果与ngIf指令相反。当输入条件为Falsy值时，该指令将显示DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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