Question

我正在编写一个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,
   ) {}
}

Answer 1

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

答案是：

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

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

在你的情况下你不是在改变div元素，而是在html结构中添加元素，所以你可以创建结构指令。

Answer 2

我几乎看不出它们之间有多大区别。从文档中，带有星号（*）前缀的结构指令最终将由Angular解释为属性。所以，我可能更喜欢属性。

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

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

2 个答案: