angular - 构建单个指令来执行结构和属性行为？

Question

我正在尝试构建一个 Angular 指令，我想根据一些配置输入值实现以下目标

根据输入值在 DOM 中添加元素。 (就像 ngIf)

如果元素呈现

，则为元素添加一些样式

添加一些属性，如 disabled到元素

根据我对 Angular 的一点了解和理解，我们可以使用 Structural Directive 来实现第一个要求。 .至于第二和第三个要求，我们需要创建 Attribute Directive .这是我对这两个指令的实现

import { SomeService } from './some.service';
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[structuralBehaviour]' })
export class StructuralBehaviourDirective {

    constructor(private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef, private someService: SomeService) { }

    @Input() set structuralBehaviour(config: any) {

        // 1st Condition
        // Conditional Stamentents using config and somService
        // For the purpose to decide whether to add template in
        // DOM or not
        this.viewContainer.createEmbeddedView(this.templateRef);

   }
}

这是属性指令

import { SomeService } from './some.service';
import { Directive, ElementRef, Input, Renderer } from '@angular/core';

@Directive({ selector: '[attributeBehaviour]' })
export class AttributeBehaviourDirective {

    constructor(private _renderer: Renderer, private _el: ElementRef,
    private someService: SomeService) { }

    @Input() set attributeBehaviour(config: any) {

        // 2nd Condition
        // Conditional Stamentents using config and someService
        // For the purpose to set style visibility property to hidden
        this._el.nativeElement.style.visibility = 'hidden';

        // 3rd Condition
        // Conditional Stamentents using config and someService
        // For the purpose to add disabled attribute
        this._renderer.setElementProperty(this._el.nativeElement, 'disabled, true);

    }
}

目前，我正在使用上述指令，如下所示，这对我来说很好用

<button *structuralBehaviour="config" [attributeBehaviour]="config"
 class="btn btn-primary">Add</button> 

我在这里寻找的是问题的答案，是否可以将上述两个指令合并在一起并从中构建单个指令，以便我可以像这样使用它们

<button *singleBehaviour="config" class="btn btn-primary">Add</button> 

Answer 1

this.viewContainer.createEmbeddedView返回 EmbeddedViewRef包含 rootNodes .你可以用它来实现你的行为

@Directive({ selector: '[singleBehaviour]' })
export class SingleBehaviourDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private _renderer: Renderer2,
    private viewContainer: ViewContainerRef) { }

  @Input() set singleBehaviour(config: any) {
    let view = this.viewContainer.createEmbeddedView(this.templateRef);
    let rootElem = view.rootNodes[0];
    if(rootElem) {
      rootElem.style.visibility = 'hidden';
      this._renderer.setProperty(rootElem, 'disabled', true);
    }
  }
}

Plunker Example