这本书的第二个指令在哪里？

Question

嗨，我正在读一本关于角的书。

我得到了下面的句子

​

​

对我来说，ngFor是一个结构性指令，这是一种诱惑力。但是第二个呢？

谢谢

Answer 1

确实有两种类型的指令。

1) Structural Directives

2) Attribute Directives

但是在这个例子中，只使用了一个指令，这就是*ngFor。这负责为books数组的每个对象创建一个books元素。

属性指令是一种可以应用于现有元素的指令类型。这允许您更改元素的属性。类似于您可以在每次迭代时获取索引，然后将其传递到属性指令中，一旦基于带有索引的条件，您就可以通过通过属性指令更改li元素的属性(例如CSS样式)来格式化该元素。

我附上了一个使用属性指令的示例

1. 指令类 import { Directive, ElementRef, OnInit } from "@angular/core"; @指令({ selector:'appHighlight‘})导出类HighlightText实现OnInit{私有theReference : ElementRef构造函数(theReference: ElementRef){ this.theReference = theReference；} ngOnInit()：void {this.theReference=“轻质珊瑚”；}}
2. 模板中的用法

<p appHighlight>Directive Usage</p>

当使用选择器[appHighlight]将指令作为属性引用时，在元素<p>中，OnInit钩子中的指令backgroundColor中定义的属性。可以使用Renderer2或通过访问nativeElement属性更改要更改的属性，但建议使用Renderer2

Answer 2

*ngFor <--注意*。以*为前缀的指令通常是其他指令的缩写(通常是两个指令“合并”成一个指令)。

角将*ngFor从星号(*)语法转换为<ng-template>元素。看看下面的代码：

<div *ngFor="let hero of heroes">
  {{hero.name}}
</div>

就像在做：

<ng-template ngFor let-hero [ngForOf]="heroes">
  <div>{{hero.name}}</div>
</ng-template>

我建议你看看带有星号前缀的结构指令