当前位置: 首页 > news >正文

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>

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

相关文章:

Angular-04:指令

① 内置指令1.1 *ngIf 结构指令1.2 [hidden] 属性指令1.3. *ngFor 结构指令1.4 *ngSwitch 结构指令 ② 自定义指令用法 指令是angular操作dom的途径&#xff0c;分为属性指令和结构指令。属性指令&#xff1a;修改元素的外观或行为。使用 [ ] 包裹。结构指令&#xff1a;增加、…...

[SpringCloud] Eureka 与 Ribbon 简介

目录 一、服务拆分 1、案例一&#xff1a;多端口微服务 2、案例二&#xff1a;服务远程调用 二、Eureka 1、Eureka 原理分析 2、Eureka 服务搭建&#xff08;注册 eureka 服务&#xff09; 3、Eureka 服务注册&#xff08;注册其他服务&#xff09; 4、Eureka 服务发现…...

【Python 零基础入门】常用内置函数 再探

【Python 零基础入门】内容补充 1 常用内置函数 Python 简介为什么要学习内置函数集合操作len(): 计算长度sorted(): 排序all(): 检查所有元素any(): 检查任一元素filter(): 过滤元素map(): 应用函数zip(): 组合元素 文件操作和输入输出open(): 打开文件read(): 读取文件write(…...

10.30二叉树一些性质,找公共祖先(一般与搜索树),操作的复杂度,选择题细节

课上 一些结论&#xff0c;性质 n0,n1,n2指的是子结点的数量&#xff0c;n0没有子节点&#xff0c;叶子结点 n2*n2n11,若n1为奇数&#xff0c;则n为偶数&#xff0c;不然&#xff0c;则为奇数 满二叉树 没有度为1的结点&#xff0c;即每个结点要么没有孩子结点&#xff0c;要么…...

亮氨酸脯氨酸肽——一种新型的医药中间体研究肽

亮氨酸脯氨酸医药中间体肽是一种合成&#xff08;人造&#xff09;激素&#xff0c;类似于大脑中产生的天然激素。它用于治疗许多医疗问题&#xff0c;包括&#xff1a; 子宫平滑肌瘤&#xff08;子宫肌瘤&#xff09;出血引起的贫血&#xff0c;或晚期或晚期前列腺癌症&#…...

Ubuntu 22.04 开机闪logo后卡在/dev/sda3: clean

环境 Vmware 17.0.0&#xff0c;CPU 2&#xff0c;内存4G&#xff0c;硬盘50G Ubuntu 22.04 问题描述 开机 --> 显示两行代码 --> 显示ubuntu logo --> 左上显示两个代码卡住不动 原因分析 1、网上大多说显卡驱动&#xff0c;最近没安装相关软件&#xff0c;也没…...

avue-crud 自定义列

基本设置&#xff1a; option: {columnBtn: false,refreshBtn: false,addBtn: false,delBtn: false,editBtn: false,viewBtn: false,searchShowBtn: false,height: auto,maxHeight: auto,calcHeight: 70,searchLabelWidth: 58,tip: false,searchShow: false,searchMenuSpan: 6…...

达索系统SOLIDWORKS 2024 装配体新增功能

如今市场环境紧迫&#xff0c;许多企业在这样的情形之下&#xff0c;都需要尽快将产品推向市场&#xff0c;赢得头筹。所以产品设计需要快速进行装配验证&#xff0c;以确保产品功能和性能的准确性和可靠性&#xff0c;同时原型或样机的制造和装配需要尽快完成&#xff0c;以满…...

电脑入门:电脑专业英语500词,供新手参考

1. file n. 文件;v. 保存文件 2. command n. 命令,指令 3. use v. 使用,用途 4. program n. 程序 5. line n. (数据,程序)行,线路 6. if conj. 如果 7. display vt. 显示,显示器 8. set v. 设置,n. 集合 9. key n. 键,关键字,关键码 10. list n. 列表,显示,…...

采购管理工具-采购软件-Leangoo免费看板工具

我们可以按照公司的实际情况定制采购流程。 1、在Leangoo免费看板工具中创建一个项目&#xff0c;项目类型建议选择“轻量级协作”&#xff0c;项目模版建议选择“人事与行政” 系统会自动为您创建四个看板&#xff0c;如下图&#xff1a; 图1 2、在项目内创建一个 “办公室采…...

【23真题】大神凭这套拿452分!看看你能拿多少?

今天分享的是23年福州大学866的信号与系统试题及解析。23年福州大学新一代电子信息的最高分是452分&#xff01;但是我看不到单科分数。按照75&#xff0c;75&#xff0c;150&#xff0c;150。也就是只有450&#xff0c;说明这个同学&#xff0c;专业课和数学几乎拿满&#xff…...

大数据之LibrA数据库系统告警处理(ALM-12002 HA资源异常)

告警解释 HA软件周期性检测Manager的WebService浮动IP地址和数据库。当HA软件检测到浮动IP地址或数据库异常时&#xff0c;产生该告警。 当HA检测到浮动IP地址或数据库正常后&#xff0c;告警恢复。 告警属性 告警参数 对系统的影响 如果Manager的WebService浮动IP地址异常…...

CSS基础入门04

目录 1.内边距 1.1基础写法 1.2复合写法 2.外边距 2.1基础写法 2.2复合写法 2.3块级元素水平居中 3.去除浏览器默认样式 4.弹性布局 4.1初体验 5.flex 布局基本概念 6.常用属性 6.1justify-content 6.2align-items 1.内边距 padding 设置内容和边框之间的距离. …...

LeetCode2741.特别的排列 状压

暴力枚举的话是n&#xff01; 考虑状压DP&#xff0c;其实就是用二进制表示状态 再进行暴力 同时加一个记忆化就好了 这里有常用技巧&#xff1a; 全集&#xff08;1<<n&#xff09;-1 增加某个元素 x | (1<<i) 删除某个元素 x & ~(1<<i) const i…...

【Linux】Centos 8 服务器部署:阿里云域名注册、域名解析、个人网站 ICP 备案详细教程

目录 一、背景信息 二、操作步骤 &#xff08;1&#xff09;查询域名 &#xff08;2&#xff09;加入域名清单 &#xff08;3&#xff09;确认订单信息 &#xff08;4&#xff09;支付 &#xff08;5&#xff09;等待域名实名认证通过 三、域名注册成功 四、查看域名…...

Sass、Less和Stylus之间有什么主要的区别?

Sass、Less和Stylus是三种常见的CSS预处理器&#xff0c;它们在功能和语法上有一些区别。以下是它们之间的主要区别&#xff1a; 1&#xff1a;语法差异&#xff1a; Sass使用缩进的语法&#xff0c;使用类似于Python的缩进来表示嵌套规则和块级作用域。Less和Stylus使用类似…...

第八章 软件测试自动化

一、学习目的与要求 通过本章的学习&#xff0c;了解自动化测试应考虑的各种因素及如何衡量自动化测试成本&#xff0c;掌握自动化测试和手工测试的优缺点&#xff0c;能正确选择软件测试策略&#xff0c;了解测试工 具的分类和使用目的&#xff0c;熟悉常用的测试工具&#xf…...

科大讯飞勾勒生成式AI输入法“模样”,开启下一代输入法革命

回顾国内第三方输入法赛道近十余年的发展&#xff0c;移动互联网的市场红利催生了科大讯飞、百度、搜狗等颇具规模和实力的头部厂商。与此同时&#xff0c;历经多年、多方角逐&#xff0c;第三方输入法市场进入存量阶段&#xff0c;升级技术、优化用户体验来挖掘存量&#xff0…...

OV-VG: A Benchmark for Open-Vocabulary Visual Grounding

OV-VG: A Benchmark for Open-Vocabulary Visual Grounding 一、Abstract 写在前面 又是一周周末&#xff0c;光调代码去了&#xff0c;都没时间看论文了&#xff0c;汗。   这是一篇关于开放词汇定位的文章&#xff0c;也是近两年的新坑&#xff0c;但是资源也是需要不少。 …...

win10 javaweb 项目8080端口被占用

文章目录 前言出现场景&#xff1a;解决思路&#xff1a; 前言 提示&#xff1a;生活该走向何处&#xff1f;也许你还不知道答案&#xff0c;但是你一定是答案的一部分。 出现场景&#xff1a; 解决思路&#xff1a; 找到运行的进程直接干掉 打开命令窗口&#xff08;win r…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...