【前端第2篇】Angular自定义指令

最新推荐文章于 2025-06-20 09:05:16 发布

菜园小饼0.0

最新推荐文章于 2025-06-20 09:05:16 发布

阅读量441

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_42528455/article/details/115529483

本文介绍了Angular中指令的分类，包括属性指令和结构指令，并通过编码实例讲解了如何创建自定义指令，如highlight.directive.ts和rainbow.directive.ts。在实际应用中，属性指令改变元素外观和行为，结构指令则能动态调整DOM结构。文章还展示了app.component.html和app.component.ts的代码片段，实现了改变input框边框颜色和打印选中文本的效果。

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

基础知识

指令分类

angular中包含以下三种类型的指令：属性指令、结构指令和组件。

属性指令改变元素的外观和行为，例如NgStyle。结构指令用来改变DOM树的结构，例如NgIf指令。
属性指令，是以元素属性的形式来使用指令。与HTML元素内置属性不同，指令是Angular对HTML元素属性的扩展，浏览器本身不能识别这些指令，指令仅在Angular环境才能识别。
结构指令可以根据模板表达式的值，增加或删除DOM元素，改变DOM的布局。
组件与指令的基本结构非常相似，差别在于组件中包含了模板。
下面直接通过实例来加深基础知识的认识。

编码实例

代码逻辑具体看注释。

新建指令文件，用于鼠标选中文本。

ng g directive highlight

highlight.directive.ts

import {
   
    Directive,HostListener,Output,EventEmitter } from '@angular/core';

@Directive({
   
   
  selector: '[appHighlight]'
})
export class HighlightDirective {
   
   
  //Output 用来在事件绑定时，子组件将事件传给父组件进行处理
@Output() appHighlight = new EventEmitter<string>();
  //当在元素上放松鼠标按钮时，会发生 mouseup 事件。
@HostListener('mouseup') onMouseUp(){
   
   
  //window.getSelection().toString()返回当前选区的纯文本内容。
  let selection = window.getSelection().toString();
  this.appHighlight.