时间戳

首页 > 解决方案 > Angular 指令：在这种情况下我应该使用结构还是属性？

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

问题描述

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

标签： angulartypescriptangular2-directivesangular-directive

解决方案

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

答案是：

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

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

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

推荐阅读