[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.mfbz.cn/a/372947.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一文讲透ast.literal_eval() eval() json.loads()

文章目录 一文讲透ast.literal_eval() eval() json.loads()1. ast.literal_eval()2. eval()3. json.loads()4. 总结 一文讲透ast.literal_eval() eval() json.loads() 在Python库中&#xff0c;我们经常会遇到需要将字符串转换为相应对象或数据结构的情况。在这种情况下&#…

研究表明:论文被大V宣传后,引用次数暴涨2~3倍!

随着AI领域的迅猛发展&#xff0c;学术成果的传播方式发生了显著转变。 期刊审稿周期长&#xff0c;当你还在和审稿人battle时&#xff0c;方法先过时了。而会议虽然没有期刊长&#xff0c;但也有几个月的时间差&#xff0c;为了保护成果的创新性并扩大影响力&#xff0c;很多…

mysql-FIND_IN_SET查询优化

优化前 SELECTuser_id,user_name,real_name,PASSWORD,real_org_id,real_org_name,real_dept_id,real_dept_name, STATUS FROMsys_user WHEREis_del 0 AND find_in_set( lilong, login_user_account ) 优化后 SELECTuser_id,user_name,real_name,PASSWORD,real_org_id,real…

必须了解的mysql三大日志-binlog、redo log和undo log

背景 日志是 mysql 数据库的重要组成部分&#xff0c;记录着数据库运行期间各种状态信息。mysql日志主要包括错误日志、查询日志、慢查询日志、事务日志、二进制日志几大类。 作为开发&#xff0c;我们重点需要关注的是二进制日志( binlog )和事务日志(包括redo log 和 undo …

Linux应用开发---网络通信

Linux应用开发—网络通信 1 网络通信概述 Linux下的网络编程&#xff0c;我们一般称为 socket 编程&#xff0c;socket 是内核向应用层提供的一套网络编程接口&#xff0c;我们可以基于socket接口开发自己的网络相关应用程序。 1.1 socket 简介 套接字&#xff08;socket&…

ReentrantLock源码分析、LockSuppor、ReentrantReadWriteLock、锁优化的方法

ReentrantLock类图 我们看一下重入锁ReentrantLock类关系图&#xff0c;它是实现了Lock接口的类。NonfairSync和FairSync都继承 自抽象类Sync&#xff0c;在ReentrantLock中有非公平锁NonfairSync和公平锁FairSync的实现。 在重入锁ReentrantLock类关系图中&#xff0c;我们可以…

Rust-获取随机数练习案例

文章目录 前言一、取官网示例猜数字游戏玩一玩cargo checkTOML文件 二、完整代码总结 前言 Rust学习系列-获取随机数练习案例&#xff0c;基于cargo 进行案例练习&#xff0c;过程中会使用cargo check&#xff1b; cargo run&#xff1b;等命名&#xff0c;同时了解基础的let …

flask_django_python五金电商网络营销的可视化分析研究

前面部分完成了系统需求分析&#xff0c;了解到新闻数据业务方面的需求&#xff0c;系统主要分为用户管理、五金信息管理、在线留言、系统管理等功能。销的可视化研究&#xff0c;并对这些数据进行处理&#xff0c; 然后对这些数据进行可视化分析和统计。 Python 爬虫技术目前来…

linux免密登录的实现

ssh免密登录使用方便&#xff0c;关键没有了口令验证反倒规避了暴力破解或者被探测的风险。配置得当&#xff0c;使用ssh免密登录更加安全。在生产环境中应用和数据库服务器之间互相设置后使用方便&#xff0c;并且在第三方人员配置使用时不用告知对方密码。 第一步、ssh登录发…

如何在HA智能家居系统中添加HACS集成并实现异地控制家中苹果与小米设备

文章目录 基本条件一、下载HACS源码二、添加HACS集成三、绑定米家设备 ​ 上文介绍了如何实现群晖Docker部署HomeAssistant&#xff0c;通过内网穿透在户外控制家庭中枢。本文将介绍如何安装HACS插件商店&#xff0c;将米家&#xff0c;果家设备接入 Home Assistant。 基本条件…

第十三篇【传奇开心果系列】Python的OpenCV库技术点案例示例:光流估计

传奇开心果短博文系列 系列短博文目录Python的OpenCV库技术点案例示例:光流估计短博文目录前言一、光流估计介绍二、Lucas-Kanade光流介绍和示例代码三、Horn-Schunck光流介绍和示例代码四、cv::calcOpticalFlowPyrLK()函数实现光流估计介绍和示例代码五、光流估计用于运动分析…

Express框架介绍—node.js

Express—Node.js 官网传送门(opens new window) 基于 Node.js 平台&#xff0c;快速、开放、极简的 Web 开发框架 Express 是用于快速创建服务器的第三方模块。 Express 初体验 基本使用 安装 Express&#xff1a; npm install express创建服务器&#xff0c;监听客户端请…

瑞萨RA6M3开发实践指南-UART实践

1.背景说明 本文是参考瑞萨RA6M3开发实践指南文章教程&#xff0c;基于瑞萨HMI-Board BSP :1.1.1 版本 RT-Thread 5.0.1 版本操作步骤进行记录&#xff0c;整理成的文档。 1.1 本章内容 使用RT-Thread Studio创建开发板的程序&#xff0c;编写UART的程序&#xff0c;实现串口…

跟着pink老师前端入门教程-day19

一、移动WEB开发之流式布局 1、 移动端基础 1.1 浏览器现状 PC端常见浏览器&#xff1a;360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器&#xff1a;UC浏览器&#xff0c;QQ浏览器&#xff0c;欧朋浏览器&#xff0…

Yolo v8 进行对象数量统计示例

Yolo v8 进行对象数量统计示例 示例代码 from ultralytics import YOLO from ultralytics.solutions import object_counter import cv2def object_count_test():# 权重文件&#xff0c;可替换为自己训练的权重文件model YOLO("yolov8n.pt")# results model.trai…

【码农新闻】 用HTTPS,还能被查出浏览记录吗 常用且好用的在线工具......

目录 【码农新闻】 用HTTPS&#xff0c;还能被查出浏览记录吗 常用且好用的在线工具...... 用HTTPS&#xff0c;还能被查出浏览记录吗常用且好用的在线工具尤雨溪 文章所属专区 码农新闻 欢迎各位编程大佬&#xff0c;技术达人&#xff0c;以及对编程充满热情的朋友们&#xf…

锁优化的方法

减少锁持有时间 减少锁粒度 将大对象拆分成小对象&#xff0c;增加并行度&#xff0c;降低锁竞争。ConcurrentHashMap允许多个线程同 时进入 锁分离 根据功能进行锁分离ReadWriteLock在读多写少时&#xff0c;可以提高性能。 锁消除 锁消除是发生在编译器级别的一种锁优化…

C语言数组练习以及场景练习题

写了那么久的知识点梳理&#xff0c;今天来写点自己觉得不错的练习题来分享&#xff0c;顺便来巩固自己的知识点&#xff0c;和加强题型的解决方法的记忆。今天给大家带来的有数组的找数字题目&#xff0c;以及场景找凶手的题目&#xff0c;下面让我们来看看今天的第一道题目。…

一文带你读懂编码和解码

编码和解码 编码&#xff1a;将字符转换为对应的二进制序列的过程叫做字符编码。 解码&#xff1a;将二进制序列转换为对应的字符的过程叫做字符解码。 py文件的创建&#xff1a; 文本编辑器在内容没有保存前&#xff0c;内容以编辑器默认编码形式保存在内存中。pycharm默认…

我要成为嵌入式高手之2月4、5日Linux高编第二天!!

读写函数接口 1、fgetc 语法&#xff1a; 功能&#xff1a;从流中获取一个字符 练习1&#xff1a;编写程序统计文件的行数 #include <stdio.h>int main(void) {FILE *fp NULL;char ch 0;int row 0;fp fopen("file.txt","r");if (NULL fp){pe…
最新文章