Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令

最新推荐文章于 2025-05-12 12:15:00 发布
最新推荐文章于 2025-05-12 12:15:00 发布
阅读量2.3k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： Angular4.x入门教程 文章标签： angular 结构 布局 dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/onil_chen/article/details/78224378
这篇教程详细介绍了Angular中的指令，包括组件、结构型指令和属性型指令。结构型指令如*ngIf、*ngFor和ngSwitch用于动态改变DOM布局，而属性型指令用于修改元素行为。文中通过实例展示了如何创建和使用这些指令，如添加事件监听、修改字体以及接收外部参数。此外，还提及了提高ngFor性能的trackBy方法。

在 Angular 中有三种类型的指令：
组件 — 拥有模板的指令
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。

组件

组件就是拥有模板的指令，这个我们在第五节编写第一个组件中就已经牛刀小试过了。
入门的内容就那么多的，不了解的还是回去再简单的看看。

结构型指令

结构型指令就是通过添加和移除DOM元素改变DOM布局的指令，可以简单的理解为类似jq中的hide、show、append、remove等概念。
Angular里面内置了一些结构型指令。

*ngIf

类似angularjs中的ng-if，当条件成立时，添加DOM。当条件不成立时，移除DOM。
这里和angularjs中的ng-show或者ng-hide是不同的，条件不成立的时候，DOM是被移除销毁掉的。
最新的Angular没有类似简单显示或者隐藏的内置指令。
想要实现这样的功能可以动态设置class的属性就好。
用法类似：<div *ngIf="isShow">'isShow' is true</div>

*ngFor

类似angularjs中的n

了解本专栏 订阅专栏 解锁全文
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令-附件资源
03-05
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令-附件资源
Angular的结构型指令
cc的博客
10-28 448
自定义一个结构型指令 * appUnless，当传入的值为false时显示，为true时隐藏。和ngIf的作用相反 unless.directive.ts import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core'; export class UnlessContext<T = unknown> { public $implicit: T = null!; public appUnless:
Angular - 自定义结构型指令
KenkoTech的博客
11-19 1720
Angular的组件和指令的功能强大，使用方式也很多样。有没有想过自定义一个*ngFor？假如项目中有一个列表数据很多，一次性渲染会消耗极大的性能，甚至会造成浏览器卡死的情况。这个时候若是*ngFor支持分布渲染就能很好的解决这个问题。事实上我们可以自定义一个结构指令来实现这个功能。 结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf 和 *ngFor。 首先了解 * 号语法 * 号是语法糖。我们以 *ngIf 指令为例： <..
angular4学习-创建结构性指令
gexiaopipi的博客
04-09 349
import {Directive,ViewContainerRef,TemplateRef,Input} from '@anguar/core' @Directive({ selector:'[appUnless]' }) export class UnlessComponent{ constructor(private viewcontainer:ViewContainerRef, pr...
angular4.0 创建结构指令
后台模板
02-04 555
转载自 http://www.ngui.cc/news/show-137.html 指令的功能 该指令实现 ngIf 指令相反的效果，当指令的输入条件为 Falsy 值时，显示DOM元素。 指令的实现 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Di
angular 写一个结构型指令
chizhaoyi5484的博客
06-07 215
写一个名叫 kylinAcl 的结构型指令，用作控制页面上的按钮根据后端返回的权限是否删除和添加。 <button *kylinAcl="'button'">应该显示</button> 创建指令很像创建组件。 这里是列表文本导入 Directive 装饰器（而不再...
Angular模块化与组件指令实战：工厂模式与自定义过滤器应用
而“指令”则是 Angular 中用于改变 DOM 行为或外观的机制，分为三种类型：组件指令（最常用）、属性型指令（修改元素行为，如 ngClass、ngStyle）和结构型指令（操纵 DOM 布局，如 *ngIf、*ngFor）。学习如何创建...
AngularJS指令与控制器通信及隔离作用域详解
本资料聚焦于 AngularJS 的两个核心知识点：第14讲“指令与控制器之间的通信”以及第16讲“理解隔离作用域”，这两个主题深入揭示了 AngularJS 中组件化开发的核心机制——指令（Directives）如何通过作用域（Scope...
【Angular】 指令详解
u013675821的博客
11-27 1220
Angular 指令是 Angular 的核心功能之一，它们让开发者可以在 HTML 模板中扩展元素的行为和样式。指令通过在 DOM 上添加特定的行为、修改 DOM 的结构，或控制视图呈现的方式来增强应用的交互性。这类指令通常不改变元素的结构，只是修改元素本身的属性或事件。结构型指令用于改变 DOM 元素的结构，主要通过添加、删除或替换 DOM 元素。用于动态设置元素的样式，它也接受对象、数组或字符串作为输入，来动态改变样式属性。用于表单控件的双向数据绑定，它能够在模板中同步表单元素的值和组件的属性。
angular2系统学习 - 结构型指令
博客转至https://chengyanzhao.github.io，优快云不再更新。
01-09 1213
1.简介ng2中指令可分为三种： - 组件 - 属性型指令 - 结构型指令结构型指令通过添加和删除DOM元素来改变DOM的布局。常用指令如：ngIf, ngSwitch, ngFor。html5中使用template标签来防止隐藏的内容，而在ng2中，遇到template标签会将之替换成空的script标签。 2.ngSwitch由于在教程中没有用过ngSwitch，而ngIf，ngFor用的
angular 结构型指令_看一下St * rs — Angular中的结构指令
weixin_26750481的博客
09-11 472
angular 结构型指令If you’ve ever done any development with Angular (and I assume you have if you’ve made it here), it is inevitable that you have come across Structural directives. They’re super easy to id...
Angular结构型指令、模块和样式
Jack汪喆的技术分享栏
04-16 817
一.结构型指令 1.*的作用 *ngIf / *ngFor是Angular的指令,*是一个语法糖，避免复杂写ng-template <a *ngIf="user.login">退出</a> 等同于 <ng-template [ngIf]="user.login"> <a>退出</a> </ng-template> ...
angular 指令
Jq的博客
09-12 2351
Angular 指令的不同类型如下： 组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。 属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。 结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。 内置指令 内置属性型指令： 常见的内置属性型指令 作用 NgClass 添加和删除一组 CSS 类 NgStyle 添加和删除一组 HTML 样式 NgModel 将数据双向绑定添加到 HTML 表单元素 内置结构型指令 结构型指令的职责是
Angular 指令
ruky36的专栏
06-25 906
Angular 指令通过扩展 HTML 的能力，使开发者能够创建更加动态和交互的 web 应用程序。了解和掌握不同类型的指令，对于构建强大的 Angular 应用至关重要。Angular 指令是 Angular 框架中的一项核心功能，它允许开发人员扩展 HTML 的功能，并创建可复用的组件和行为。组件指令是最常用的一种指令，用于创建可复用的 UI 组件。每个组件指令都关联一个模板，用于定义组件的视图。属性指令用于改变 DOM 元素的外观或行为。开发者可以创建自定义指令来扩展 Angular 的功能。
详解Angular结构型指令模块和样式
08-26 478
一，结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="user.login"> <a>退出</a> </ng-template> 避免了写ng-template。 <ng-template [ngIf]="item.reminder"> <mat-icon > alarm &l
Angular 自定义结构型指令structural directive的使用
donjan的博客
12-18 683
Angular的结构型指令的职责是 HTML 布局。 它们塑造或重塑 DOM 的结构，比如添加、移除或维护这些元素。说白了就是对网页的结构进行控制，NgIf，NgFor都是结构型指令。 创建src/app/helpers/directive.ts写一个结构指令appCan @Directive({ selector: '[appCan]' }) export class CanDirective ...
Angular-属性型指令和结构型指令的区别
weixin_42643653的博客
05-19 347
Angular-指令 Angular内置的指令包括 属性型指令和结构型指令 1、属性型指令会监听并修改其所在的 HTML 元素和组件的行为、Attribute（标签） 和 Property（DOM树）。 它们通常被应用在元素上，就好像它们是 HTML 属性一样，因此得名属性型指令。 属性型指令：NgClass、NgStyle、NgModel NgClass： <div [ngClass]="isSpecial ? 'special' : ''">This div is special&lt.
Angular指令的高级应用与结构指令的创建
最新发布
weixin_32456485的博客
05-12 368
本文介绍了如何在Angular中简化绑定，并通过banana-in-a-box语法简化模板语法。详细说明了如何导出指令以在模板变量中使用，以及如何利用属性和宿主绑定来定义和使用属性指令。此外，还探讨了结构指令的概念、应用以及如何创建自定义结构指令，展示了结构指令在控制HTML文档布局方面的强大功能。
Angular2+ 结构型指令
j178202798的博客
11-07 526
结构型指令的职责是HTML布局。 它们塑造或重塑DOM的结构，比如添加、移除或维护这些元素。 像其它指令一样，你可以把结构型指令应用到一个宿主元素上。 然后它就可以对宿主元素及其子元素做点什么。 结构型指令非常容易识别。 在这个例子中，星号（*）被放在指令的属性名之前。 {{hero.name}} 三个常用的内置结构型指令 —— NgIf、NgFor和NgSwitch.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值