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

我试图建立一个角指令，我想实现基于一些配置输入下面的东西值构建单指令来执行结构和属性行为？

在DOM基于输入值添加元素。（就像ngIf）
添加一些造型，以元素，如果其呈现
像disabled添加一些属性属性元素

按我的一点知识和角度理解，我们可以通过实现第一个要求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>

来源

2017-05-12 Ajax

阿贾克斯，你使用jQuery，或者可以将其包含在您的项目？ jQuery可以快速解决您的问题。 – Chris

不，我没有使用JQuery，只是试图用AngularScript代码实现它。 – Ajax

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

来源

2017-05-16 06:34:39 yurzui

是啊那就是我在找的东西。 – Ajax

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

关于第一个问题，看看here

对于第二，尽量this

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

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

来源

2017-05-12 16:21:33 Chris

感谢您的回答。这个解决方案适用于jQuery，但我正在寻找的是基于Angular（v4）Typescript的解决方案。 – Ajax

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

回答

相关问题