Question

我正在尝试构建一个Angular Directive，我希望根据一些配置输入值实现以下内容

根据输入值在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的{{1}}。您可以使用它来实现您的行为

rootNodes

<强> Plunker Example

Answer 2

我打算把它写成评论，但是关注的是运行超过500个字符。

第一期看here

对于第二个，请尝试this

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

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

构建单一指令以执行Structural和amp;属性行为？

2 个答案: