当前位置: 首页 > 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…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...