Angular-04:指令

  • ① 内置指令
    • 1.1 *ngIf 结构指令
    • 1.2 [hidden] 属性指令
    • 1.3. *ngFor 结构指令
    • 1.4 *ngSwitch 结构指令
  • ② 自定义指令用法

  1. 指令是angular操作dom的途径,分为属性指令和结构指令。
  2. 属性指令:修改元素的外观或行为。使用 [ ] 包裹。
  3. 结构指令:增加、删除dom节点以修改布局,使用*作为指令前缀。
  4. 指令与模板关系密切,可以与DOM进行灵活交互,改变布局或者样式。
  5. 组件也是指令的一种,区别在于:组件带有单独的模板,一般指令作用于已有DOM元素上。
  • 此处列举的不完全,只是几个常用的

① 内置指令

1.1 *ngIf 结构指令

根据条件渲染DOM节点或者移出dom节点

<!--满足条件才渲染该节点--><div *ngIf="data.length===0">暂无数据</div>

1.2 [hidden] 属性指令

根据条件显示Dom节点或隐藏dom节点(display)根据样式来控制元素显示

1.3. *ngFor 结构指令

遍历数据生成html结构。

范例:ngFor所有属性

   <p *ngFor="let item of items;   // 数据遍历let i = index;   // 当前索引值let isEven = even;  // 当前是否是奇数行let isOdd = odd;   // 当前是否是偶数行let isFirst = first;  // 当前是否是第一行let isLast = last;  // 当前是否是最后一行trackBy:trackBy;  //优化数据渲染,提高性能。接收一个函数"></p>
 let i = index;  // index为ngFor内部提供的一个变量,这里声明一个变量i并赋值过来,就可以在页面上使用了。

1.4 *ngSwitch 结构指令

  1. 控制显示那个模板,类似js中的switch
  2. 语法:[ngSwitch]=“表达式” *ngSwitchCase=“条件值” *ngSwitchDefault----(在不满足任何条件时选择)

例:

<ul [ngSwitch]="status"><li *ngSwitchCase="1">周一</li><li *ngSwitchCase="2">周二</li><li *ngSwitchCase="3">周三</li><li *ngSwitchCase="4">周四</li><li *ngSwitchCase="5">周五</li><li *ngSwitchDefault>加班</li>
</ul>
status: number = 1;

结果: status值为1,显示“周一”;(如果status为0,或不符合以上条件则显示:“加班”)

在这里插入图片描述


② 自定义指令用法

场景:为元素设置默认的背景颜色,鼠标移入时的背景颜色以及移出时的背景颜色。

举例:元素默认为深蓝色,鼠标移入时变成粉色,移出变成黄色

  • 用户可以设置自定义颜色,未设置颜色使用默认色深蓝色,自定义颜色使用了浅蓝色。

appBgColor指令

import { AfterViewInit, Directive, ElementRef, HostListener, Input } from '@angular/core';// 接收参数的类型
interface Options {bgColor?: string;
}@Directive({selector: '[appBgColor]'
})
export class BgColorDirective implements AfterViewInit {// 接收参数,没有传入值,默认为:#00aaff@Input("appBgColor") appBgColor: Options = {};//要操作的Dom节点element: HTMLElement;constructor(private el: ElementRef //获取要操作的Dom节点) {this.element = this.el.nativeElement;}// 组件模板初始化完成后设置元素的背景颜色ngAfterViewInit(): void {this.element.style.backgroundColor = this.appBgColor.bgColor || "#00aaff";}// 为元素添加鼠标移入监听@HostListener('mouseenter') enter() {this.element.style.backgroundColor = 'pink';}// 为元素添加鼠标移出监听@HostListener('mouseleave') leave() {this.element.style.backgroundColor = 'yellow';}
}

1.使用指令默认颜色
未设置颜色,使用默认颜色

<div class="test" appBgColor>第一块</div>

2.使用自定义颜色

<div class="test" [appBgColor]="{bgColor:'skyblue'}">第二块</div>

效果图:
在这里插入图片描述

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

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

相关文章

代码随想录图论 第二天 | 695. 岛屿的最大面积 1020. 飞地的数量

代码随想录图论 第二天 | 695. 岛屿的最大面积 1020. 飞地的数量 一、695. 岛屿的最大面积 题目链接&#xff1a;https://leetcode.cn/problems/max-area-of-island/ 思路&#xff1a;典型的遍历模板题&#xff0c;我采用深度优先&#xff0c;每块岛屿递归遍历的时候计数&…

Python 框架学习 Django篇 (六) ORM关联

像是上一章我们很少会通过页面点击去添加和绑定关系表&#xff0c;更多的时候都是通过django的语法实现&#xff0c;接下来我们做一个案例 django rom是怎么操作外键关系的 创建mode模型表 Django_demo/mgr/models.py # 国家表 class Country(models.Model):name models.Cha…

手把手教你部署Jenkins教程,小白也能学会(多图预警)!

背景 公司的前端、后端构建及部署工作都是人工去做&#xff0c;随着业务扩大&#xff0c;项目迭代速度变快&#xff0c;人员增多&#xff0c;各种问题都暴露出来&#xff0c;将通过一个简单案例分享一下基于Jenkins的前后端自动化工作流搭建的过程&#xff0c;搭建完这套工作流…

如何编辑pdf?推荐福昕高级pdf编辑器

这里写目录标题 安装教程1.双击FoxitPhantomPDF941_L10N_Setup.exe安装2.打开FiX UZ1文件夹 复制plugins文件夹和FoxitPhantomPDF.exe到安装目录中替换3. 双击Express2BusinessFix New.reg导入注册表 如何复制页面如何修改pdf的内容福昕高级pdf编辑器安装包 【Note】学校要求加…

小型洗衣机哪个牌子质量好?家用小洗衣机推荐

随着人们的生活水平的提升&#xff0c;越来越多小伙伴来开始追求更高的生活水平&#xff0c;一些智能化的小家电就被发明出来&#xff0c;而且小型洗衣机是其中一个。现在通过内衣裤感染到细菌真的是越来越多&#xff0c;所以我们对内衣裤的清洗频次会高于普通衣服&#xff0c;…

2022年京东双十一手机数码全品类数据回顾

2023年双十一临近&#xff0c;特此带大家回顾一下去年双十一热门品类的一些战况数据。这一期是京东手机电脑数码。 整体表现来看&#xff0c;2022年双11大促京东手机、电脑、数码类产品并没有想象中的增长状态&#xff0c;无论是电脑中的笔记本、数码中的相机&#xff0c;或者是…

ICC2:分段长tree的流程

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 分段长tree操作起来方法很多,这里提供两种ICC2分段长tree的方法。有需要的可以试试。 1.用原始sdc长一遍tree,找得到要做subtree部分,并预估latency值。 2.把sdc中添加subtree clock,subtree是…

C# ModBus协议(RTU )详细指南

C# ModBus协议RTU 通讯详解 前言 ModBus协议:官方的解释是Modbus协议是一种通信协议,用于在自动化设备之间进行数据传输。它最初是由Modicon公司于1979年开发的,现在已成为工业界的一种通用协议。Modbus协议有多种变体,包括Modbus-RTU、Modbus-TCP和Modbus-ASCII等,其中…

国产 2443A 峰值功率分析仪

2443A 峰值功率分析仪 频率范围覆盖&#xff1a;9kHz至67GHz 产品综述 2443A峰值功率分析仪由峰值功率分析仪主机和系列化峰值功率探头组成&#xff0c;可用于测量和分析微波毫米波脉冲调制信号的多种幅度和时间参数&#xff0c;是表征脉冲调制信号特性的综合性测量与分析仪器。…

矢量图形编辑软件Illustrator 2023 mac中文版软件特点(ai2023) v27.9

illustrator 2023 mac是一款矢量图形编辑软件&#xff0c;用于创建和编辑排版、图标、标志、插图和其他类型的矢量图形。 illustrator 2023 mac软件特点 矢量图形&#xff1a;illustrator创建的图形是矢量图形&#xff0c;可以无限放大而不失真&#xff0c;这与像素图形编辑软…

gitlab查看、修改用户和邮箱,gitlab生成密钥

查看用户、邮箱 git config user.name git config user.email 修改用户、邮箱 git config --global user.name “xxx” git config --global user.email “xxxxxx.com” 生成ssh密钥 ssh-keygen -t rsa -C “xxxxxx.com” 查看SSH秘钥 cat ~/.ssh/id_rsa.pub 将秘钥复制&…

html文字一行时靠右,多行时靠左

html文字一行时靠右&#xff0c;多行时靠左 元素居中 display: block; margin: auto; 文字居中 text-align: center; 文字下划线 text-decoration: underline; 边框线 border: 1px #1D6AF8 double; 圆弧角 border-radius: 10px; <!DOCTYPE html> <html><hea…

【佳学基因检测】如何在WINDOWS中安装E-utilities?

在Windows操作系统中安装和使用NCBI E-utilities需要使用命令行工具&#xff0c;并且通常是通过使用Windows的命令行终端&#xff08;例如&#xff0c;命令提示符或PowerShell&#xff09;来完成的。以下是安装和配置NCBI E-utilities的步骤&#xff1a; 安装Perl&#xff08;…

How to install the console system of i-search rpa on Centos 7

How to install the console system of i-search rpa on Centos 7 1、 准备1.1 、查看磁盘分区状态1.2、上传文件1.2.1、添加上传目录1.2.2、上传安装包1.2.3、解压安装包1.2.4、查看安装包结构 1.3、安装依赖包1.3.1、基础依赖包1.3.2 相关依赖 1.4、关闭防火墙1.5、解除SeLin…

【JAVA学习笔记】47 - 异常,try-catch处理,throw处理

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter12/scr/com/yinhai/exception_ 〇、异常处理的引入 程序出现一个小问题如int num1 10;int num2 0&#xff1b;num1 / num2 > 10 / 0 会抛出错误&#xff0c;但这样不算致命的小问题就…

Python 编写 Flink 应用程序经验记录(Flink1.17.1)

目录 官方API文档 提交作业到集群运行 官方示例 环境 编写一个 Flink Python Table API 程序 执行一个 Flink Python Table API 程序 实例处理Kafka后入库到Mysql 下载依赖 flink-kafka jar 读取kafka数据 写入mysql数据 flink-mysql jar 官方API文档 https://nigh…

Spring Boot Actuator 介绍

Spring Boot Actuator是什么 Spring Boot Actuator 模块提供了生产级别的功能&#xff0c;比如健康检查&#xff0c;审计&#xff0c;指标收集&#xff0c;HTTP 跟踪等&#xff0c;帮助我们监控和管理Spring Boot 应用。 这个模块是一个采集应用内部信息暴露给外部的模块&…

汇编学习(1)

汇编、CPU架构、指令集、硬编码之间的关系 ● 汇编语言&#xff1a;这是一种低级语言&#xff0c;用于与硬件直接交互。它是由人类可读的机器码或指令组成的&#xff0c;这些指令告诉CPU如何执行特定的任务。每条汇编指令都有一个对应的机器码指令&#xff0c;CPU可以理解和执…

css属性clip-path的使用说明

前言 当ui设计上的图片、div等的形状不是长方形&#xff0c;而是多边形的时候&#xff0c;就可以借助clip-path这个css属性来实现。 clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示&#xff0c;区域外的隐藏。【from: MDN】 clip-path可以理解为一把剪…

decapoda-research/llama-7b-hf 的踩坑记录

使用transformers加载decapoda-research/llama-7b-hf的踩坑记录。 ValueError: Tokenizer class LLaMATokenizer does not exist or is not currently imported. 解决办法&#xff1a; https://github.com/huggingface/transformers/issues/22222 将tokenizer_config.json中LLa…