【Angular学习】(二)指令

在 Angular 中有三种类型的指令:

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

组件

创建组件

在控制台输入ng generate component 组件名

新生成的组件,在src的app里面
在这里插入图片描述
创建完成后的文件有scss(我预设的样式文件为scss),html,ts,spec.ts四个文件,scss写样式,html写静态页面,ts写js代码,spec.ts测试使用
app.module.ts文件的装饰器下,自动声明了刚才新添加的组件

应用组件

在这里插入图片描述
component.ts文件中,@Component就是一个装饰器,把product装饰成一个组件,selector决定改组件以什么标签被使用。

然后就可以在app.component.html使用<app-product>标签来应用product组件了
在这里插入图片描述
这时候打开localhost:4200可以看到组件效果
在这里插入图片描述

属性型指令

属性型指令至少需要一个带有 @Directive 装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。 控制器类实现了指令需要的指令行为。

创建方式

例如创建一个highlight的属性型指令。这个指令在鼠标悬浮时给文字设置背景颜色。

先控制台新建指令

ng generate directive highlight

会生成TS文件src/app/highlight.directive.ts
在这里插入图片描述
现在编辑这个TS文件
在这里插入图片描述
使用import 语句从 Angular 的 core 库中导入一个 ElementRef 符号。

可以在指令的构造函数中注入 ElementRef,来引用宿主 DOM 元素,

ElementRef 通过其 nativeElement 属性,让我们可以直接访问宿主 DOM 元素。

这里的第一个实现把宿主元素的背景色设置为了黄色。

使用方法

<p appHighlight>Highlight me!</p>

Angular 在宿主元素 <p> 上发现了一个 appHighlight 属性。 然后它创建了一个 HighlightDirective 类的实例,并把所在元素的引用注入到了指令的构造函数中。 在构造函数中,该指令把 <p> 元素的背景设置为了黄色。

结构型指令

NgIf

该指令用于根据表达式的值,动态控制模板内容的显示与隐藏。
它与 AngularJS 1.x 中的 ng-if 指令的功能是等价的。

语法

<div *ngIf="condition">...</div>

NgFor

该指令用于基于可迭代对象中的每一项创建相应的模板。
它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。

语法

<li *ngFor="let item of items;">...</li>

NgSwitch

Angular 的 NgSwitch 实际上是一组相互合作的指令:NgSwitch、NgSwitchCase 和 NgSwitchDefault。
一个值(hero.emotion)被被赋值给了 NgSwitch,以决定要显示哪一个分支。

NgSwitch 本身不是结构型指令,而是一个属性型指令,它控制其它两个 switch 指令的行为。 这也就是要写成 [ngSwitch] 而不是 *ngSwitch 的原因。

NgSwitchCase 和 NgSwitchDefault 都是结构型指令,因此要使用星号(*)前缀来把它们附着到元素上。
NgSwitchCase 会在它的值匹配上选项值的时候显示它的宿主元素。
NgSwitchDefault 则会当没有兄弟。
NgSwitchCase 匹配上时显示它的宿主元素。

<div [ngSwitch]="hero?.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
</div>

写法

指令同时具有两种拼写形式大驼峰和小驼峰,比如NgIf 和 ngIf。 这里的原因在于,NgIf 引用的是指令的类名,而 ngIf 引用的是指令的属性名。
指令的类名拼写成大驼峰形式(NgIf),而它的属性名则拼写成小驼峰形式(ngIf)。

星号(*)

指令前加星号,是一个语法糖。
从内部实现来说,Angular 把 *ngIf 属性 翻译成一个 <ng-template> 元素 并用它来包裹宿主元素。
比如下面的例子

<div *ngIf="hero" class="name">{{hero.name}}</div>

angular会将它翻译成

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值