[Angular 基础] - 指令(directives)

[Angular 基础] - 指令(directives)

这里假设已经知道如何创建 Angular 组件以及数据绑定,不然可以参考前两篇笔记:

  • [Angular 基础] - Angular 渲染过程 & 组件的创建

  • [Angular 基础] - 数据绑定(databinding)

就像中文翻译一样,directives 就是指令,它就是一系列 DOM 中存在的指令

component directive

Component 这个 declaration 就是一个最基础的指令,当运行:

import { Component } from '@angular/core';@Component({selector: 'app-my-component',template: `<p>Hello, world!</p>`,
})
export class MyComponent {}

这段代码的时候,其实就已经是在运行一个指令,这个指令做了下面几件事情:

  • @Component 表明下面声明的类是一个组件
  • selector 定义一个元素,该元素会接受当前组件内的 HTML Template
  • template 定义一个 HTML Template,将会展现在 app-my-component 这个 HTML 元素中

这就是当前需要遵从的指令,我个人理解是通知 DOM 如何渲染特定的 HTML 元素

以此类推,@NgModule, @Directive 等也是对应的 component directive

structural directives

structural directives 的指令是通知 DOM 增加或删除特定的 HTML 元素。目前主流的内置 structural directives 有 3 个:*ngIf, *ngFor*ngSwitch,当然,这不代表 Angular 之提供了这三个 structural directives

除此之外,开发者自己也可以创建相应的 structural directives

*ngIf

语法为 *ngIf="expression",并且这个表达式(expression) 需要返回一个 boolean。依旧使用之前的案例,这里假设点击 add server 的按钮会实现对应功能,并且需要向用户显示新的组件已经生成

对应的 View 层修改如下:

<!-- 其余显示添加 server 的 input 和 button 这里不重复了 -->
<p *ngIf="serverCreated">Sever was created, server name is {{ serverName }}</p>

对应的 VM 层修改如下:

// 新增加的变量,只有在用户点击创建 server 的 btn 时才需要显示信息serverCreated = false;onCreateServer() {this.serverCreationStatus = 'Server was created!';this.serverCreated = true;}

效果如下:

在这里插入图片描述

可以看到只有当 *ngif 里的条件为 true 时,该 DOM 才会渲染

有了 if 也会有 else 条件,这时候 V 层的代码可以这么修改:

<p *ngIf="serverCreated; else noServer">Sever was created, server name is {{ serverName }}
</p>
<ng-template #noServer><p>No server was created!</p>
</ng-template>

这里使用了一个特殊的 HTML 元素——ng-template,它主要的用途是为了搭配 structural directives 去使用的;这里 #noServer 是对 ng-template 这一元素的引用变量名

*ngIf v17 的更新

目前有一个新的语法可以重置 ngIf,它的语法就是 @for,使用方式如下:

@if (serverCreated) {
<p>Sever was created, server name is {{ serverName }}</p>
} @else {
<p>No server was created!</p>
}

其展示的效果是一样的,else if 的语法则为 @else if

这个语法是 v17 最新推出的版本,暂时还不是 production-ready,所以只在这里提一下,不会深入研究

ngFor

这是一个可以循环渲染 HTML 元素的方式,用法如下:

  • 修改 VM 层

    这里会新增一个 servers 的数组,并且在 onCreateServer 中将新添的 serverName 推到数组中去:

    servers = ['Test Server', 'Test Server2'];onCreateServer() {this.serverCreationStatus = 'Server was created!';this.servers.push(this.serverName);this.serverCreated = true;
    }
    
  • 修改 V 层

    这里就使用 *ngFor 去渲染整个数组:

    <app-server *ngFor="let server of servers"></app-server>
    

最终效果如下:

在这里插入图片描述

⚠️:这里还没有涉及到组件之间数据的传输,所以 serverName 不会动态渲染

相比较 ngIfngFor 的语法更复杂一些,它的完整语法如下:

<div*ngFor="let item of servers;trackBy: trackByFn;index as i;first as isFirst;last as isLast;even as isEven;odd as isOdd"
>{{ i }}: {{ item }}<span *ngIf="isFirst">(first)</span><span *ngIf="isLast">(last)</span><span *ngIf="isEven">(even)</span><span *ngIf="isOdd">(odd)</span>
</div>

其中 trackByFn 写在了 VM 层:

  trackByFn(index: number, item: string) {return item;}

最终展现的效果如下:

在这里插入图片描述

这里的 trackBy: trackByFn; 是 Angular 提出的一个优化方案,当它存在的时候,Angular 会检查当前返回值是否变更,如果不变更的话将不会重新渲染当前的 DOM 结点

至于 first, last 这四个是 Angular 提供的值,以便可以轻松检查这些边界条件

*ngFor v17 的更新

这个语法如下:

@for (item of items: track item.id) {
<li>{{ item.title }}</li>
}

这个语法是 v17 最新推出的版本,暂时还不是 production-ready,所以只在这里提一下,不会深入研究

ngSwitch

它的语法则类似于 switch,修改的代码如下:

<div*ngFor="let item of servers;trackBy: trackByFn;index as i;first as isFirst;last as isLast;even as isEven;odd as isOdd"
>{{ i }}: {{ item }}<span *ngIf="isFirst">(first)</span><span *ngIf="isLast">(last)</span><span *ngIf="isEven">(even)</span><span *ngIf="isOdd">(odd)</span><div [ngSwitch]="item"><p *ngSwitchCase="'red'">You picked red server!</p><p *ngSwitchCase="'blue'">You picked blue server!</p><p *ngSwitchCase="'green'">You picked green server!</p><p *ngSwitchDefault>Pick a server name</p></div>
</div>

效果如下:

在这里插入图片描述

*ngSwitch v17 的更新

这个语法如下:

@switch (expression) { @case value1:
<p>value1</p>
@case value2:
<p>value2</p>
}

这个语法是 v17 最新推出的版本,暂时还不是 production-ready,所以只在这里提一下,不会深入研究

attribute directives

structural directives 控制的是 DOM 元素的增删(是否渲染),那么 attribute directives 控制的则是渲染 DOM 中的属性

这里也会列举主流用的 3 个,同样,这也不代表 Angular 仅仅提供了这 3 个 structural directives,而且开发者同样也可以创建自己的 structural directives

ngModel

这个在之前的笔记里已经提过了,NgModel 主要提供的是双向绑定的功能

ngStyle

ngStyle 就是比较简单的控制 CSS 的地方,用法如下:

<p[ngStyle]="{'background-color': serverStatus === 'offline' ? 'red' : 'green'}"
>{{ "Server" }} with ID {{ serverId }} is {{ getServerStatus() }}
</p>

效果如下:

在这里插入图片描述

⚠️:以上代码修改在 server.component.html

❗:如果无法正确渲染,请查看 servers.component.html 中的 ngFor 是不是返回 <app-server></app-server>

⚡:ngStyle 是 attribute directives,[ngStyle] 则是使用了 property binding

🛣️:'backgound-color' 还有另一个写法是用驼峰命名法 backgroundColor,而 : 后面的也只是需要一个表达式,这里用了三元式,也可以单独创建一个方法

ngClass

这个指令则是动态更新类名,这里实现代码如下:

<p[ngStyle]="{'background-color': serverStatus === 'offline' ? 'red' : 'green'}"[ngClass]="{online: serverStatus === 'online',offline: serverStatus === 'offline'}"
>{{ "Server" }} with ID {{ serverId }} is {{ getServerStatus() }}
</p>

至于 VM 层也需要添加对应的 CSS:

@Component({selector: 'app-server',templateUrl: './server.component.html',styles: [`.online {color: cyan;}.offline {color: lightgray;}`,],
})
export class ServerComponent {}

最终效果如下:

在这里插入图片描述

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

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

相关文章

【已解决】pt文件转onnx后再转rknn时得到推理图片出现大量锚框变花屏

前言 环境介绍&#xff1a; 1.编译环境 Ubuntu 18.04.5 LTS 2.RKNN版本 py3.8-rknn2-1.4.0 3.单板 迅为itop-3568开发板 一、现象 采用yolov5训练并将pt转换为onnx&#xff0c;再将onnx采用py3.8-rknn2-1.4.0推理转换为rknn&#xff0c;rknn模型能正常转换&#xff0c;…

养好花草鱼鸟,也能旺家

不少朋友家里既养了鱼鸟&#xff0c;也养了花草&#xff0c;平时逗逗鸟喂喂鱼再赏赏花&#xff0c;真是非常惬意的生活&#xff0c;而用养鱼的水养植物&#xff0c;花草植物会长得格外茂盛。根据这一原理&#xff0c;很多人喜欢在养一些水培花草的时候&#xff0c;顺便养几尾小…

基于SpringBoot+Vue的外卖点餐管理系统

末尾获取源码作者介绍&#xff1a;大家好&#xff0c;我是墨韵&#xff0c;本人4年开发经验&#xff0c;专注定制项目开发 更多项目&#xff1a;CSDN主页YAML墨韵 学如逆水行舟&#xff0c;不进则退。学习如赶路&#xff0c;不能慢一步。 目录 一、项目简介 二、开发技术与环…

第三篇:SQL数据模型、通用语法和语法分类

一&#xff0c;SQL数据模型 &#xff08;一&#xff09;关系型数据库&#xff08;RDBMS&#xff09; 1.概念 &#xff08;百度百科&#xff09;指采用了关系模型来组织数据的数据库&#xff0c;其以行和列的形式存储数据&#xff0c;以便于用户理解&#xff0c;关系型数据库这…

【蓝桥杯选拔赛真题64】python数字塔 第十五届青少年组蓝桥杯python 选拔赛比赛真题解析

python数字塔 第十五届蓝桥杯青少年组python比赛选拔赛真题 一、题目要求 (注:input()输入函数的括号中不允许添加任何信息) 提示信息: 数字塔是由 N 行数堆积而成,最顶层只有一个数,次顶层两个数,以此类推。相邻层之间的数用线连接,下一层的每个数与它上一层左上…

网络安全大赛

网络安全大赛 网络安全大赛的类型有很多&#xff0c;比赛类型也参差不齐&#xff0c;这里以国内的CTF网络安全大赛里面著名的的XCTF和强国杯来介绍&#xff0c;国外的话用DenCon CTF和Pwn2Own来举例 CTF CTF起源于1996年DEFCON全球黑客大会&#xff0c;以代替之前黑客们通过互相…

EasyX图形库学习(三、用easyX控制图形界面中的小球、图片-加载、输出)

目录 小球视频 图像输出函数 loadimage用于从文件中读取图片 putimage在当前设备上绘制指定图像。 initgraph 函数 图片输出 代码详解&#xff1a; 1. 初始化图形界面 2. 设置背景颜色并清除屏幕 3. 加载并显示图片 4. 等待用户输入并退出程序 图形界面中的小球 1…

自动化诊断测试之CANoe.DIVA入门

目录 0 前言 1 CANoe.DIVA基础 2 CANoe.DIVA TIPs 0 前言 写在前面&#xff1a;如对本文有任何疑问欢迎评论区讨论&#xff0c;希望和大家一起进步。同时HIL测试群欢迎大家加入如有需要也可私信我拉你。VT和DIVA都可以做UDS的自动化测试&#xff0c;但相对VT来说使用DIVA生成…

Redis学习及总结

Redis 快速入门 Redis属于非关系型数据库 SQL应用场景 数据结构固定相关业务对数据安全性一致性要求高 NoSQL应用场景 数据结构不固定对一致性&#xff0c;安全性要求不高性能要求高 &#x1f3af;需要使用Xftp 传输压缩包到虚拟机上 安装好Redis后&#xff0c; 执行命令…

UE5 PAK包热加载

参考知乎UE5 Pak学习与应用&#xff08;一&#xff09;运行时导入模型 - 知乎 使用的版本为UE5.1 使用插件为HorPatcher和EasyFile Dialog HotPatcher:UE资源热更打包工具HotPatcher | 循迹研究室 ,Github地址为:GitHub - hxhb/HotPatcher: Unreal Engine hot update manage …

最小生成树超详细介绍

目录 一.最小生成树的介绍 1.最小生成树的简介 2.最小生成树的应用 3.最小生成树的得出方法 二.Kruskal算法 1.基本思想&#xff1a; 2.步骤&#xff1a; 3.实现细节&#xff1a; 4.样例分析&#xff1a; 5.Kruskal算法代码实现&#xff1a; 三.Prim算法 1.基本思想…

【多模态大模型】视觉大模型SAM:如何使模型能够处理任意图像的分割任务?

SAM&#xff1a;如何使模型能够处理任意图像的分割任务&#xff1f; 核心思想起始问题: 如何使模型能够处理任意图像的分割任务&#xff1f;5why分析5so分析 总结子问题1: 如何编码输入图像以适应分割任务&#xff1f;子问题2: 如何处理各种形式的分割提示&#xff1f;子问题3:…

【数据结构和算法】--- 基于c语言排序算法的实现(1)

目录 一、排序的概念及其应用1.1排序的概念1.2 排序的应用1.3 常见的排序算法 二、插入排序2.1直接插入排序2.2 希尔排序2.2.1 预排序2.2.2 缩小gap2.2.3 小结 三、选择排序3.1 直接选择排序3.2 堆排序 一、排序的概念及其应用 1.1排序的概念 排序&#xff1a; 所谓排序&…

RTE2023第九届实时互联网大会:揭秘未来互联网趋势,PPT分享引领行业新思考

随着互联网的不断发展&#xff0c;实时互动技术正逐渐成为新时代的核心驱动力。 在这样的背景下&#xff0c;RTE2023第九届实时互联网大会如期而至&#xff0c;为业界人士提供了一个探讨实时互联网技术、交流创新理念的绝佳平台。 本文将从大会内容、PPT分享价值等方面&#…

ShardingSphere 5.x 系列【6】YAML 配置介绍

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址:https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1. 前言2. YamlConfiguration3. 常用配置项3.1 JDBC 驱动3.2 数据源3.3 规则…

mysq开启慢查询日志,对慢查询进行优化

1.创建实验的环境 创建对应的数据库&#xff0c;然后写脚本向数据库中写入400万条的数据 //创建实验用的数据库 CREATE DATABASE jsschool;//使用当前数据库 USE jsschool;//创建学生表 CREATE TABLE student (sno VARCHAR(20) PRIMARY KEY COMMENT 学生编号,sname VARCHAR(20…

加固平板电脑丨三防智能平板丨工业加固平板丨智能城市管理

随着智能城市的不断发展&#xff0c;人们对于城市管理的要求也在不断提高&#xff0c;这就需要高效、智能的城市管理平台来实现。而三防平板就是一款可以满足这一需求的智能设备。 三防平板是一种集防水、防尘、防摔于一体的智能平板电脑&#xff0c;它可以在复杂的环境下稳定运…

python介绍,安装Cpython解释器,IDE工具pycharm的使用

python介绍 官方的Python解释器本质是基于C语言开发的一个软件&#xff0c;该软件的功能就是读取以py.结尾的文件内容&#xff0c;然后按照Guido定义好的语法和规则去翻译并执行相应的代码。这种C实现的解释器被称为Cpython。 python解释器的种类&#xff1a;Jython IPyth…

记录下ibus-libpinyin输入法的重新安装

目前的版本为&#xff1a; 首先把现在的ibus-libpinyin卸了 sudo apt-get --purge remove ibus-libpinyin sudo apt-get autoremove 安装教程请参考 Installation libpinyin/ibus-libpinyin Wiki GitHub yilai sudo apt install pkg-config sudo apt-get install lib…

实战分享:SpringBoot在创新创业项目管理中的应用

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…