Угловые директивы: я должен использовать структурный или атрибут в этом случае? - PullRequest
Новая
       34

Угловые директивы: я должен использовать структурный или атрибут в этом случае?

0 голосов
/ 22 мая 2018

Я пишу директиву 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,
   ) {}
}

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

какую из них использовать директиву атрибута или структурную директиву?

Ответ:

директива атрибута - эта директива используется для изменения внешнего вида или поведения элемента, с которым она связана.Пример: я хочу динамически добавить всплывающую подсказку к своему текстовому элементу управления или цветному текстовому полю и его родительскому элементу в зависимости от условия.Таким образом, при изменении внешнего вида или поведения элемента в этом случае следует использовать директиву атрибута, поскольку вы хотите взаимодействовать с элементом, с которым связана директива.

Структурная директива - эта директива используется для изменения структуры HTML.Например, * ngFor (который добавляет элемент в html), * ngIF (скрыть элемент show в html на основе условия), в этом случае вы можете использовать структурную директиву.

В этом случае вы не изменяете элемент div, новы добавляете элемент в html структуру, чтобы вы могли создать директиву структуры.

0 голосов
/ 22 мая 2018

Я не вижу большой разницы между ними.Из документации структурная директива с префиксом звездочка (*) будет интерпретирована Angular в атрибут в конце концов.Итак, я мог бы предпочесть атрибут.

Посмотрите здесь https://angular.io/guide/structural-directives#the-asterisk--prefix

...