Angular 指令介绍及使用(三)

Angular 指令概述

在 Angular 中,指令是一种机制,用于扩展和修改组件的行为和外观。指令可以由开发者自定义,也可以是 Angular 框架自带的一些内置指令。通过使用指令,我们可以在 HTML 模板中通过属性或元素名来操作组件。

Angular 中的指令主要分为三种类型:

  • 组件指令(Component Directives)

组件指令是一种带有模板的指令,它们代表了可重用的 UI 组件。组件指令通过使用 @Component 装饰器来定义,并使用 selector 属性指定了该组件指令在 HTML 模板中的使用方式。
Angular的组件指令主要有组件装饰器 @Component。举例如下:

@Component:

下面是@Component指令的一个例子:

import { Component } from '@angular/core';  @Component({  selector: 'app-example',  template: '<h1>Hello, World!</h1>'  
})  
export class ExampleComponent { }

在这个例子中,@Component装饰器接受一个元数据对象,其中包含了这个组件的一些基本属性。selector属性定义了如何在HTML模板中使用这个组件,这里我们把它定义为app-example。template属性定义了组件的HTML模板,这里我们简单地显示一个标题。

除了这些,@Component装饰器还可以接受很多其它元数据,如styles、providers等,这些都是用来帮助定义和配置Angular组件的。

  • 结构型指令(Structural Directives)

结构型指令用于根据条件动态操作元素或元素集合的结构。常见的结构型指令有 *ngIf、*ngFor、*ngSwitch 等。它们通过改变 DOM 结构来控制元素的显示或隐藏、复制或删除等操作。

  • 属性型指令(Attribute Directives)

属性型指令用于修改元素的外观或行为,例如修改元素的样式或增加/删除元素的属性。内置的属性型指令包括 ngClass、ngStyle、ngModel 等。

Angular 指令特点

Angular 中的指令具有以下特点:

指令是组件的基础:在 Angular 中,组件本质上是带有模板和一些行为的指令。因此,组件指令是 Angular 中最常用和重要的指令之一。

指令可以扩展和修改现有的组件和 HTML 元素:通过使用指令,我们可以在现有的组件和 HTML 元素上扩展新的行为和功能。例如,我们可以创建一个指令来让某个元素支持拖拽操作。

指令提供了可重用的组件和功能:通过使用指令,我们可以将某些组件或功能封装成可重用的指令,以便在多个项目中重复使用。这样可以提高代码的可维护性和可重用性。

指令可以通过 DOM 操作来实现各种效果:通过使用指令,我们可以在 DOM 中动态地添加、删除或修改元素和属性,从而实现特定的效果。

指令可以与服务和其他指令进行交互:指令可以依赖其他的指令或服务,从而实现更复杂的交互和功能。

指令具有丰富的声明周期:指令有多个生命周期钩子,可以在指令的创建、更新和销毁等不同阶段执行不同的逻辑。这些生命周期钩子提供了更丰富的指令控制和扩展能力。

Angular 常用指令

在Angular框架中,常见的指令类型包括结构型指令和属性型指令。

结构型指令:

ngIf:

根据条件控制元素的显示与隐藏。

<div *ngIf="showElement">显示的内容</div>
ngFor:

迭代一个集合,并为每个元素生成对应的DOM元素。

<ul><li *ngFor="let item of items">{{ item }}</li>
</ul>
ngSwitch:

根据条件显示不同的元素。

<div [ngSwitch]="condition"><div *ngSwitchCase="1">条件1</div><div *ngSwitchCase="2">条件2</div><div *ngSwitchDefault>默认条件</div>
</div>

属性型指令:

ngClass:

根据条件动态添加和移除元素的CSS类。

<div [ngClass]="{'highlight': isHighlighted, 'italic': isItalic}">文本内容</div>
ngStyle:

根据条件动态设置元素的内联样式。

<div [ngStyle]="{'color': textColor, 'font-size.px': fontSize}">文本内容</div>
ngModel:

实现双向数据绑定,将表单控件的值与组件数据进行同步。

<input [(ngModel)]="name" placeholder="姓名">

Angular 指令例子

以下是一个详细的 Angular 指令的代码例子,展示了如何创建一个自定义指令,并与服务进行交互:

创建自定义指令:

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { MyService } from './my.service';@Directive({selector: '[myCustomDirective]'
})
export class MyCustomDirective implements OnInit {@Input() myCustomDirective: string;constructor(private elementRef: ElementRef, private myService: MyService) {}ngOnInit(): void {// 在指令初始化时执行的逻辑this.elementRef.nativeElement.style.backgroundColor = 'yellow';// 使用服务中的方法const result = this.myService.doSomething();console.log(result);}
}

创建一个服务:

import { Injectable } from '@angular/core';@Injectable()
export class MyService {doSomething(): string {return 'Service method called.';}
}

在组件中使用指令:

<div myCustomDirective="example"></div>

这个例子中,我们创建了一个名为 myCustomDirective 的自定义指令,它会将匹配的元素的背景色设置为黄色,并在指令的 ngOnInit 生命周期钩子中调用了服务 MyService 的 doSomething 方法,并将结果打印到控制台。

为了使用自定义指令,我们需要将其添加到 Angular 模块的 declarations 数组中,并确保相关的服务也被注入和提供。





刚刚接触Angular,总结理论知识和简单例子,希望能帮助后来学习Angular的人。

大鹏一日同风起 扶摇直上九万里

诸位加油


END

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/143058.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode-2656. K 个元素的最大和-朴素+贪心和数学公式

Problem: 2656. K 个元素的最大和 每日一题。 文章目录 思路Code朴素贪心等差求和公式 思路 从小到大排序&#xff0c;一直对最后那个值&#xff08;下标&#xff09;进行1操作。 联系等差数列(d1)&#xff0c;前n项求和。n(a1an)/2或n*a1n(n-1)d/2 Code 朴素 class Solution…

LLM App ≈ 数据ETL管线

虽然现有的 LLM 应用程序工具&#xff08;例如 LangChain 和 LlamaIndex&#xff09;对于构建 LLM 应用程序非常有用&#xff0c;但在初始实验之外不建议使用它们的数据加载功能。 当我构建和测试我的LLM应用程序管道时&#xff0c;我能够感受到一些尚未开发和破解的方面的痛苦…

css3 初步了解

1、css3的含义及简介 简而言之&#xff0c;css3 就是 css的最新标准&#xff0c;使用css3都要遵循这个标准&#xff0c;CSS3 已完全向后兼容&#xff0c;所以你就不必改变现有的设计&#xff0c; 2、一些比较重要的css3 模块 选择器 1、标签选择器&#xff0c;也称为元素选择…

龙迅LT9211D MIPI(DSI/CSI)转LVDS和集创北方ICN6202 MIPIDSI转LVDS比对

龙迅LT9211D描述&#xff1a; Lontium LT9211D是一款高性能的MIPI DSI/CSI- 2到双端口LVDS转换器。LT9211D反序列化输入的MIPI视频数据&#xff0c;解码数据包&#xff0c;并将格式化的视频数据流转换为AP和移动显示面板或摄像机之间的LVDS发射机输出。LT9211D支持最大14 dB输…

git远程分支覆盖本地分支

git fetch --all git reset --hard origin/master (这里master要修改为对应的分支名) git pull

给Elasticsearch-ik分词器添加额外的分词字典

默认分词 可以看到 马拉巴尔 被拆分了 GET /news/_analyze {"text":"四国联盟将在澳大利亚举行“马拉巴尔2023”演习","analyzer": "ik_max_word" }... {"token" : "马拉","start_offset" : 13,"…

【极客时间-系列教程】深入剖析Kubernetes-开篇词 | 打通“容器技术”的任督二脉

开篇词 | 打通“容器技术”的任督二脉 学习技术的最快途径是什么&#xff1f;有时候和同事们一起在讨论这个事情 我想想有以下几点 首先是实操&#xff0c;只看不练等于空研究官方文档&#xff0c;官网是最全的需要认真研究必须项目中使用&#xff0c;不然就忘掉了 这些说的…

微信小程序 30分钟倒计时功能

ps:凑个数 getTimeDiff(date) {let _this = this;let curTime = new Date(date)_this.countDown(_this.timeFormatConvert(new Date(curTime.setMinutes(curTime.getMinutes() + 30))))},timeFormatConvert(e) {const Y = e.getFullYear(); // 年const M = this.prefixZero(e.…

c# 抽象类

c#抽象类 namespace demo1 {/// <summary>/// 抽象类是作为一种抽象的概念&#xff0c;是基类/// 在抽象类中声明方法&#xff0c;加上abstract就是抽象方法。所有有抽象类派生出来的都要重载实现抽象方法/// 抽象方法不可以使用virtual、static、和prevate修饰/// 抽象…

谷歌提出AGI的6大原则,和5大能力等级

随着ChatGPT等大模型的出现,AGI概念正在从哲学层面快速转向实际应用落地&#xff0c;并且ChatGPT已经展示出了初级AGI的功能&#xff08;如AutoGPT&#xff09;,有不少专家认为&#xff0c;AGI时代可能在10年内到来。 因此&#xff0c;需要一个明确的技术框架来讨论和衡量不同…

Linux下基本操作命令

一、基础命令 1. pwd 命令 pwd命令用于显示当前所在的工作目录的全路径名称。该命令无需任何参数&#xff0c;只需在终端窗口中输入 pwd 命令即可使用。 2. cd 命令 cd命令用于更改当前工作目录。该命令需要一个参数&#xff1a;目标目录名称。例如&#xff0c;若要进入 Do…

WPF UI样式介绍

WPF&#xff08;Windows Presentation Foundation&#xff09;是微软的一个用于创建桌面客户端应用程序的UI框架。WPF使用XAML&#xff08;可扩展应用程序标记语言&#xff09;作为其界面设计语言&#xff0c;这使得开发者能够以声明性方式定义UI元素和布局。 在WPF中&#xf…

Linux学习笔记3-GPIO(1)

学习单片机时最开始也是从GPIO开始的&#xff0c;Linux的主芯片I.MX6UL有124个GPIO&#xff0c;当然很多是复用的&#xff0c;与之对比&#xff0c;STM32F407系列的单片机GPIO口是112个。回顾之前单片机的学习&#xff0c;大部分的GPIO功能是通过HAL库函数调用的&#xff0c;例…

腾讯云标准型SA4服务器AMD处理器性能测评

腾讯云服务器标准型SA4实例CPU采用AMD处理器&#xff0c;新一代腾讯云自研星星海双路服务器&#xff0c;搭配AMD EPYC Genoa处理器&#xff0c;内存采用最新 DDR5&#xff0c;默认网络优化&#xff0c;最高内网收发能力达4500万pps&#xff0c;最高内网带宽可支持100Gbps。阿腾…

IP-guard flexpaper远程命令执行漏洞复现 [附POC]

文章目录 IP-guard flexpaper RCE漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 IP-guard flexpaper RCE漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测…

acwing算法基础之搜索与图论--匈牙利算法求二分图的最大匹配数

目录 1 基础知识2 模板3 工程化 1 基础知识 二分图中的最大匹配数&#xff1a;从二分图中选择一些边&#xff08;这些边连接集合A和集合B&#xff0c;集合A中结点数目为n1&#xff0c;集合B中结点数目为n2&#xff09;&#xff0c;设为集合S&#xff0c;其中任意两条边不共用一…

Django框架FAQ

文章目录 问题1:Django数据库恢复问题2:null和blank的区别3.报错 django.db.utils.IntegrityError: (1062, “Duplicate entry ‘‘ for key ‘mobile‘“)4.报错 Refused to display ‘url‘ in a frame because it set ‘X-Frame-Options‘ to deny5.报错 RuntimeError: cryp…

NovelD: A Simple yet Effective Exploration Criterion论文笔记

NovelD:一种简单而有效的探索准则 1、Motivation 针对稀疏奖励环境下的智能体探索问题&#xff0c;许多工作中采用各种内在奖励(Intrinsic Reward)设计来指导困难探索环境中的探索 &#xff0c;例如&#xff1a; ICM&#xff1a;基于前向动力学模型的好奇心驱动探索RND&…

CCF编程能力等级认证GESP—C++1级—样题1

CCF编程能力等级认证GESP—C1级—样题1 单选题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09;判断题&#xff08;每题 2 分&#xff0c;共 20 分&#xff09;编程题 (每题 25 分&#xff0c;共 50 分)第一题第二题 参考答案单选题判断题编程题1编程题2 单选题&#xf…

Linux文件系统

1.基础IO &#xff08;1&#xff09;文件操作 在C语言中&#xff0c;用来进行文件操作的函数有很多&#xff0c;比如&#xff1a; 所谓文件操作&#xff0c;简而言之就是通过语言层面向系统层面进行函数调用&#xff0c;命令操作系统为在磁盘上为其创建文件&#xff0c;那么这些…