本书陈述中的第二条指令在哪里 [英] Where is the second directive in this book statement

问题描述

我正在读一本关于角度的书

我把下面的句子打了个比方

对我来说，ngFor是一个结构指令是很直观的.但是第二个在哪里?

谢谢

解决方案

确实有两种类型的指令.

1)结构指令

2)属性指令

但是在此示例中，仅使用了一个指令，即 * ngFor .这负责为 books 数组的每个对象创建一个 li 元素.

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

我已附上了属性指令"的示例用法

1. 指令类

   从"@ angular/core"导入{指令，ElementRef，OnInit}；

     @Directive({选择器:"[appHighlight]"})导出类HighlightText实现OnInit {私人theReference:ElementRef构造函数(theReference:ElementRef){this.theReference = theReference;}ngOnInit():void {this.theReference.nativeElement.style.backgroundColor ="lightcoral";}} 

2. 模板中的用法

< p appHighlight>指令用法</p>

当使用选择器 [appHighlight] 将指令作为属性引用时，在元素< p> 中，在指令 backgroundColor 中定义的属性 OnInit 挂钩中的code>.您可以使用 Renderer2 或访问 nativeElement 属性来更改要更改的属性，尽管建议使用 Renderer2

Hi I m reading a book about angular

I got the following sentence dipicted below

For me it is entuitive that the ngFor is a structural directive. But where is the second one ?

Thanks

解决方案

There are indeed two types of directives.

1) Structural Directives

2) Attribute Directives

But in this example there is only one directive used and this is the *ngFor. This is responsible for creating an li element for every object of the books array.

The attribute directive is a type of directive that can be applied to an existing element. This allows you to change the attributes of the element. Something like you can take the index at each iteration and then pass it into the attribute directive, and once based on a condition with the index you can format the li element by changing its attributes such as the CSS Styling through the attribute directive.

I have attached an example use of the Attribute Directive

1. Directive Class

   import { Directive, ElementRef, OnInit } from "@angular/core";

    @Directive({
      selector:'[appHighlight]'
    })
    export class HighlightText implements OnInit{
      private theReference : ElementRef
   
      constructor(theReference : ElementRef){
        this.theReference = theReference;
      }
      ngOnInit(): void {
        this.theReference.nativeElement.style.backgroundColor = "lightcoral";
      }
    }
   

2. Usage in Template

<p appHighlight>Directive Usage</p>

When the directive is referenced as an attribute using selector [appHighlight], in the element <p> the attribute defined in the directive backgroundColor in the OnInit hook. You can change the attribute you want to change using the Renderer2 or by accessing the nativeElement property, though it is recommended to use the Renderer2

这篇关于本书陈述中的第二条指令在哪里的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！