Angular属性型指令

2024-05-15 15:15:54

2019独角兽企业重金招聘Python工程师标准>>>

属性型指令 — 改变元素、组件或其它指令的外观和行为的指令

属性性指令的创建步骤如下：

import语句需要从 Angular 的core库导入的一些符号。

Directive提供@Directive装饰器功能。
ElementRef注入到指令构造函数中。这样代码就可以访问 DOM 元素了。
Input将数据从绑定表达式传达到指令中，数据绑定。
HostListener绑定事件到指令中。

为@Directive装饰器指定一个 CSS 属性选择器[property]，以便从模板中识别出关联到这个指令的 HTML。

import { Directive, ElementRef, Input，HostListener } from '@angular/core';
@Directive({ selector: '[myHighlight]' })export class HighlightDirective {constructor(el: ElementRef) {}@HostListener('mouseenter') onMouseEnter() {this.el.nativeElement.style.backgroundColor = 'yellow';}
}

Angular 会为每个匹配的元素创建一个指令控制器类的实例，并把 Angular 的ElementRef和Renderer注入进构造函数。 ElementRef是一个服务，它赋予我们通过它的nativeElement属性直接访问 DOM 元素的能力。Renderer服务允许通过代码设置元素的样式。

使用属性型指令

在根模块中import，declarations指令类，然后在需要的模版元素中添加指令名

<p myHighlight>Highlight me!</p>

为指令绑定响应事件

从@angular/core中引入@HostListener到指令中。HTML DOM 事件去掉on前缀

@HostListener('事件') 函数名() {//表达式
}

和addEventListener()差不多，此时在绑定了该属性的元素上触发相应的事件后，就会执行@HostListener中的函数。

用@Input向指令传递值

可以用一般的各种组件之间的数据传递方法。下面是简单的父组件向子组件传递

父组件中设置数据，模版元素绑定用于传递数据的变量名
在指令类中 @Input（‘别名’）变量名: 值类型

转载于:https://my.oschina.net/u/3412211/blog/895121

Angular属性型指令相关推荐

Angular自学笔记（?）属性型指令
基本概念用于改变DOM元素的外观或行为的指令组件是一种特殊的指令 import {Component} from '@angular/core'; @Component({selector: 'a ...
angular官网-指令
参考: 内置指令:https://angular.cn/guide/template-syntax#built-in-directives 属性指令: 结构指令: angular中的指令类型: 组件 ...
angular的自定义指令---详解
1.angualr指令在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的 ...
angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员今天给大家分享一下,题目angular js 常用指令ng-if.ng-class.ng-option.ng-valu ...
Angular中的指令（Directives）
Angular中的指令分为属性指令和结构性指令属性指令(Attribute Directives) 看起来像HTML的属性设置,有可能进行数据绑定或时间绑定只能影响/改变已经添加存在的元素对象 & ...
【修真院web小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员今天给大家分享一下,修真院官网js(职业)任务八,深度思考中的知识点--angular js常用指令 ng-bl ...
ANGULAR自带指令有哪些？
1.背景介绍 AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. 2.知识剖析 angula ...
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
问题描述本文涉及到的代码位置:https://github.com/wangzixi-diablo/ngDynamic 我有一个能接受内容投影的 Angular Component: 具体投影内容, ...
Angular 自定义 structural 指令的一个例子
The <ng-container> is a syntax element recognized by the Angular parser. It's not a directive, ...

最新文章

热门文章