angular- Directive

内置属性型指令

NgClass —— 添加和删除一组 CSS 类。

NgStyle —— 添加和删除一组 HTML 样式。

NgModel —— 将数据双向绑定添加到 HTML 表单元素。

内置结构型指令

NgIf —— 从模板中创建或销毁子视图。

NgFor —— 为列表中的每个条目重复渲染一个节点。

NgSwitch —— 一组在备用视图之间切换的指令。

要在特定条件为 true 时复写 HTML 块，请将 *ngIf 放在 *ngFor 元素的容器元素上。它们之一或两者都可以是
，这样你就不必引入额外的 HTML 层次了。

属性型指令

clickout.directive.ts

import { Directive, Input, EventEmitter, Output, ElementRef, HostListener, Renderer2, OnDestroy } from '@angular/core'
@Directive({selector: '[appClickout]'
})
export class ClickoutDirective implements OnDestroy {@Input('appClickout') targetDom: ElementRef@Output() showEvent = new EventEmitter()clickEventconstructor(el: ElementRef, render: Renderer2) {this.clickEvent = render.listen('document', 'click', (evt) => {if (!this.targetDom) {return}if (el.nativeElement.contains(evt.target) ||(this.targetDom && this.targetDom.nativeElement.contains(evt.target) ||(evt.target.nodeName === 'svg' || evt.target.nodeName === 'rect' || evt.target.nodeName === 'polygon')) ||(evt.target.offsetParent && evt.target.offsetParent.className.indexOf('cdk-overlay-container') >= 0)) {evt.stopPropagation()evt.preventDefault()return false} else {this.showEvent.emit(false)}})}ngOnDestroy() {if (this.clickEvent) {this.clickEvent();}}
}

引入

@NgModule ....
declarations:[ClickoutDirective ]

应用

<div class="editState" #orderStatus appClickout [appClickout]="orderStatusInit" (showEvent)="editShow('editState')">

@ViewChild('orderStatus', { static: false }) orderStatus: ElementRef;ngAfterViewInit(): void {this.orderStatusInit = this.orderStatus;}editShow(event) {switch (event) {case 'editState':this.editState = false;break;case 'editLeavel':this.editLeavel = false;break;}}

angular- Directive相关推荐

利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果
假设有这样一个需求:我们需要增强 HTML 里原生的 input 标签,让其达到,随着用户输入字符时,其颜色自动切换的效果. 这是一个典型的可以使用 Angular Directive 实现的需求. ...
关于Angular directive使用的语法问题
Angular Directive 分为两大类:structural 指令和 attribute 指令. 前者用于控制或者改变 DOM,后者控制已有 elements 的外观或者行为. 源代码: im ...
Angular Directive 详解
Angular Directive 学习学习目的:为了更好的了解 ng directive 的使用方法. Directive可能是AngularJS中比较复杂的一个东西了.一般我们将其理解成指令.A ...
angular directive 深入理解
由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...
一个关于Angular Directive selector里的中括号使用问题
其实对于Angular指令的selector,我一直搞得不是太清楚,看下面的例子:selector的定义里,包含了中括号. 在消费该Directive的HTML页面里,不用中括号: 则Directiv ...
每个施加在HTML元素上的Angular Directive，运行时都会生成一个新的实例
每个施加在HTML元素上的Directive,运行时都会生成一个新的实例. 这些实例的ngOnInit hook执行完毕之后,再统一支持ngAfterViewInit: 上图这个focus-lock ...
angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){// Runs during compilereturn {// name: '',// priorit ...
使用 angular directive 和 json 数据的 D3 带标签 donut chart示例
利用angular resource加载priorityData.json中的json数据,结合D3画出甜甜圈图.运行index.html结果如图所示: priorityData.json中json数 ...
fragment in UI5 Smart Template and directive in Angular
在Jerry看来UI5里的fragment提供的功能是Angular directive里的一个子集,即layout的重用. UI5 fragment See Jerry's blog My unde ...
ANGULAR自带指令有哪些？
1.背景介绍 AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. 2.知识剖析 angula ...

angular- Directive

内置属性型指令

内置结构型指令

属性型指令

angular- Directive相关推荐

最新文章

热门文章