Angular 角度指令：在这种情况下我应该使用structural还是attribute？

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

我的困境是，我不知道是否应该为此使用属性指令或结构指令。我两个都试过了，而且都有效，所以我需要解释我应该使用哪一个

属性指令：

HTML:

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

<div *myStrDirective="params"></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,
   ) {}
}

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,
   ) {}
}        

导入{
指令，
输入，
ViewContainerRef，
组件参考，
组件工厂分解器，
}从“@角度/核心”；
从“/MyComponent”导入{MyComponent}；
@指令（{选择器：“[myAttrDirective]”}）
导出类属性指令{
@输入（）
公共集合属性指令（属性指令：任意）{
常量工厂=this.componentFactoryResolver.resolveComponentFactory(
MyComponent，
);
attrDirective.forEach（（元素，索引）=>{
常量componentRef:componentRef<
真菌成分
>=this.viewContainer.createComponent（工厂）；
常量myComponent:myComponent=componentRef.instance；
myComponent.setInformation（{element}）；
});
}
建造师(
私有viewContainer:ViewContainerRef，
专用componentFactoryResolver:componentFactoryResolver，
) {}
}

---

结构指令：

HTML:

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

<div *myStrDirective="params"></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,
   ) {}
}

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,
   ) {}
}        

导入{
指令，
输入，
ViewContainerRef，
组件参考，
组件工厂分解器，
}从“@角度/核心”；
从“/MyComponent”导入{MyComponent}；
@指令（{选择器：“[myStrDirective]”}）
导出类StrDirective{
@输入（）
公共集StrDirective（StrDirective:any）{
常量工厂=this.componentFactoryResolver.resolveComponentFactory(
MyComponent，
);
strDirective.forEach（（元素，索引）=>{
常量componentRef:componentRef<
真菌成分
>=this.viewContainer.createComponent（工厂）；
常量myComponent:myComponent=componentRef.instance；
myComponent.setInformation（{element}）；
});
}
建造师(
私有viewContainer:ViewContainerRef，
专用componentFactoryResolver:componentFactoryResolver，
) {}
}        

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

---

看看这里

使用属性指令还是结构指令

答案是:

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

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

在这种情况下，您并没有更改div元素，而是在html结构中添加元素，所以您可以创建structure指令