Angular 指令：在这种情况下我应该使用结构还是属性？

Posted 2023-02-22

技术标签:

【中文标题】Angular 指令：在这种情况下我应该使用结构还是属性？【英文标题】：Angular directives: should I use structural or attribute in this case? 【发布时间】：2018-10-31 22:08:39 【问题描述】：

我正在编写一个 Angular 5 指令，其目标是将一些 主机视图（从组件创建）添加到 viewContainer 中。

我的困境是我不知道我应该为此使用属性指令还是结构指令。我都试过了，它们都可以工作，所以我需要解释一下我应该使用哪一个。

属性指令：

html：

<div [myAttrDirective]="param"></div>

指令：

import 
        Directive,
        Input,
        ViewContainerRef,
        ComponentRef,
        ComponentFactoryResolver,
 from "@angular/core";
import  MyComponent  from "./my-component";

@Directive( selector: "[myAttrDirective]" )
export class AttrDirective 
   @Input()
   public set AttrDirective(attrDirective: any) 
      const factory = this.componentFactoryResolver.resolveComponentFactory(
          MyComponent,
      );

      attrDirective.forEach((element, index) => 
         const componentRef: ComponentRef<
            MyComponent
         > = this.viewContainer.createComponent(factory);

         const myComponent: MyComponent = componentRef.instance;
         myComponent.setInformation( element );
      );
   

   constructor(
      private viewContainer: ViewContainerRef,
      private componentFactoryResolver: ComponentFactoryResolver,
   )

结构性指令：

HTML：

<div *myStrDirective="params"></div>

指令：

import 
        Directive,
        Input,
        ViewContainerRef,
        ComponentRef,
        ComponentFactoryResolver,
 from "@angular/core";
import  MyComponent  from "./my-component";

@Directive( selector: "[myStrDirective]" )
export class StrDirective 
   @Input()
   public set StrDirective(strDirective: any) 
      const factory = this.componentFactoryResolver.resolveComponentFactory(
          MyComponent,
      );

      strDirective.forEach((element, index) => 
         const componentRef: ComponentRef<
            MyComponent
         > = this.viewContainer.createComponent(factory);

         const myComponent: MyComponent = componentRef.instance;
         myComponent.setInformation( element );
      );
   

   constructor(
      private viewContainer: ViewContainerRef,
      private componentFactoryResolver: ComponentFactoryResolver,
   )

【问题讨论】：

【参考方案1】：

使用属性指令和结构指令哪一个？

答案是：

attribute 指令 - 此指令用于更改它所附加的元素的外观或行为。示例：我想根据条件将工具提示动态添加到我的文本框控件或颜色文本框及其父级。因此，在这种情况下，它会改变元素的外观或行为，因为您想与附加指令的元素进行交互，因此需要使用属性指令。

结构指令 - 该指令用于改变 html 的结构。例如*ngFor（在html中添加元素），*ngIF（根据条件在html中隐藏显示元素），在这种情况下你可以使用结构指令。

在您的情况下，您没有更改 div 元素，而是在 html 结构中添加元素，因此您可以创建结构指令。

【讨论】：

【参考方案2】：

我几乎看不出它们之间有什么不同。从文档中，带有星号 (*) 前缀的结构指令最终将由 Angular 解释为 attribute。所以，我可能更喜欢属性。

看看这里https://angular.io/guide/structural-directives#the-asterisk--prefix

【讨论】：