英文:
Angular input binding in structural directive
问题
我无法找到一种方法来绑定我的结构性指令中的多个输入:
视图
<div *requiredAccessRight requiredA="[EnumA.A]" requiredB="[EnumB.A]">
指令
@Directive({
// tslint:disable-next-line: directive-selector
selector: '[requiredAccessRight]',
})
export class RequiredAccessRightDirective implements OnInit {
@Input() requiredA: EnumA[];
@Input() requiredB: EnumB[];
// ...
}
在 ngOnInit()
中,这两个 @Input()
将都变成 undefined
。
英文:
I cannot find a way to bind multiple inputs in my structural directive:
view
<div *requiredAccessRight requiredA="[EnumA.A]" requiredB="[EnumB.A]">
directive
@Directive({
// tslint:disable-next-line: directive-selector
selector: '[requiredAccessRight]',
})
export class RequiredAccessRightDirective implements OnInit {
@Input() requiredA: EnumA[];
@Input() requiredB: EnumB[];
...
}
during ngOnInit()
both Inputs()
will end up undefined
答案1
得分: 5
指令的输入遵循以下命名约定:
> 指令输入名称 = 指令选择器 + 标识符(首字母大写)
因此,要创建 requiredA
和 requiredB
作为输入,您需要拥有 requiredAccessRightRequiredA
和 requiredAccessRightRequiredB
。
在使用指令时,您始终需要将一个值传递为指令名称值。
例如,在 requiredAccessRight
指令中,您必须将 requiredAccessRight
作为输入(这是强制性的)。
在使用指令时,第一个值始终是没有任何标识符的,该值将分配给指令名称值。然后,您可以使用 ;
作为分隔符传递其他自定义输入。
指令
import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
@Directive({
selector: '[requiredAccessRight]'
})
export class DirectiveDirective {
private _requiredAccessRight: any;
private _requiredAccessRightRequiredA: any;
private _requiredAccessRightRequiredB: any;
@Input() set requiredAccessRight(value: any[]) {
this._requiredAccessRight = value;
console.log(this._requiredAccessRight)
}
@Input() set requiredAccessRightRequiredA(enumA) {
this._requiredAccessRightRequiredA = enumA;
console.log(this._requiredAccessRightRequiredA);
}
@Input() set requiredAccessRightRequiredB(enumB) {
this._requiredAccessRightRequiredB = enumB;
console.log(this._requiredAccessRightRequiredB);
}
constructor(private templateRef: TemplateRef<any>, private vcr: ViewContainerRef) { }
}
在HTML模板中的用法
由于第一个值是必需的,您可以在组件中的位置处传递您的值,而不是 ''
或 []
,我只是在这里使用占位符。
<button *requiredAccessRight="'';requiredA: [enumA]; requiredB: [enumB]">click</button>
<!-- 或 -->
<button *requiredAccessRight="[];requiredA: [enumA]; requiredB: [enumB]">click</button>
<!-- 或 -->
<button *requiredAccessRight="let i;requiredA: [enumA]; requiredB: [enumB]">click</button>
英文:
The inputs of directive follows naming convention as follows:
> Directive input name = directiveSelector + identifier (first character capital)
So in order to create requiredA
and requiredB
as inputs you need to have requiredAccessRightRequiredA
and requiredAccessRightRequiredB
.
After creating these inputs while using the directive, you always need to pass one value as directive name value.
e.g. in requiredAccessRight
directive you must have requiredAccessRight
as input (this is mandatory).
While using the directive, first value will always be without any iedntifier which will be assigned to directive name value. After that by using ;
as separator you can pass other custom inputs.
Directive
import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
@Directive({
selector: '[requiredAccessRight]'
})
export class DirectiveDirective {
private _requiredAccessRight: any;
private _requiredAccessRightRequiredA: any;
private _requiredAccessRightRequiredB: any;
@Input() set requiredAccessRight(value: any[]) {
this._requiredAccessRight = value;
console.log(this._requiredAccessRight)
}
@Input() set requiredAccessRightRequiredA(enumA) {
this._requiredAccessRightRequiredA = enumA;
console.log(this._requiredAccessRightRequiredA);
}
@Input() set requiredAccessRightRequiredB(enumB) {
this._requiredAccessRightRequiredB = enumB;
console.log(this._requiredAccessRightRequiredB);
}
constructor(private templateRef: TemplateRef<any>, private vcr: ViewContainerRef) { }
}
Usage in HTML template
As first value is mandatory you can pass your value from component in place of ''
or []
, I am just using placeholder here.
<button *requiredAccessRight="'';requiredA: [enumA]; requiredB: [enumB]">click</button>
<!-- or -->
<button *requiredAccessRight="[];requiredA: [enumA]; requiredB: [enumB]">click</button>
<!-- or -->
<button *requiredAccessRight="let i;requiredA: [enumA]; requiredB: [enumB]">click</button>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论