我正在尝试构建一个 Angular 指令,我想根据一些配置输入值实现以下目标
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>
最佳答案
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
关于angular - 构建单个指令来执行结构和属性行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43939109/