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

Question

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

根据输入值在 DOM 中添加元素。（就像 ngIf）
如果元素已渲染，请为其添加一些样式
向元素

disabled

根据我对Angular的一点了解和理解，我们可以使用Structural Directive. Where as for 2nd & 3rd requirement we need to create 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

我本来打算把它写成评论，但担心运行超过 500 个字符。

第一期看here

第二个，试试this

和第三个，类似于第二个超链接，而不是 .css() 使用 .attr('attrName', 'attrVal')。或者，尝试实施 this

这些可能有帮助也可能没有帮助，它们是一些快速谷歌搜索的结果。第二个超链接坚持将 .css() 包装到 angularJS 框架中，并且无需在单独的脚本标记中包含 jQuery 即可使用。我不确定是否确实如此，因此里程数可能会有所不同。祝你好运！

Answer 2

this.viewContainer.createEmbeddedView returns 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

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

Build single directive to perform both Structural & Attribute behaviour?

typescript

angular-directive

angular