为指令属性传递动态值获取未定义的Angular5

Posted 2023-02-22

【中文标题】为指令属性传递动态值获取未定义的Angular5

【英文标题】：Passing Dynamic value for directive attribute getting undefined Angular5

【发布时间】：2018-05-24 18:42:02

【问题描述】：

使用“@angular/core”：“^5.0.1”、“@angular/material”：“^5.0.0-rc.1”、“@angular/cdk”：“^5.0.0-rc .1"。

我具有检查所有字段是否添加了 XXXqaName 属性的功能，因此添加了一个带有 @input 属性的指令，该指令接受 XXXqaName

选择器 mat-select 元素的静态输入，如 qa-name="matselectone" 工作正常，并且 XXXqaName 属性出现在 html 模板中，如：

<mat-select XXXqaName="matselectone"></mat-select> // Works fine

当添加 ma​​t-options 的动态值 像 XXXqaName="data- option.value " 输入不是通过（即未定义）和 XXXqaName 属性在像

这样的 HTML 模板中找不到

<mat-option XXXqaName="data- option.value "></mat-option> // XXXqaName missing in HTML template only ng-reflect name is present.

注意：option.value 存在，并且下拉列表中的选项值已填充，但 HTML 中缺少属性“xxxqaName”。

指令：

@Directive(
     selector: `input[type="text"], mat-select, mat-option`
 )
export class QaDirective implements OnInit 

   @Input('XXXqaName') qaName: string;

   constructor(private element: ElementRef)  

   ngOnInit()  this.verifyQa();

   verifyQa(): void 
   if (!this.qaName) 
   console.error('No "XXXqaName" provided for:',This.element.nativeElement);
   return;
   
  

为输入属性值传递动态值时的指令仍未定义。是否有其他方法可以将动态值传递给指令任何帮助都会很棒。

注意：可能看起来像Dynamic attribute values for directives，但它们使用组件中的函数来操作输入。这里略有不同，属性仍未定义。

【问题讨论】：

When inspecting html template couldn't find attribute 当然你不会看到这些属性，因为你绑定到属性

是的，不能很好地绑定属性。

stackblitz.com/edit/angular-fynww2?file=app/directive/…

我在@Input('qa-name')前面添加了@HostBinding('attr.qa-name')

【参考方案1】：

更新

属性绑定不会添加到 DOM。 如果您希望绑定成为属性，请使用attr. 绑定

attr.XXXqaName="data- option.value "

或

[attr.XXXqaName]="'data-' + option.value"

StackBlitz example

原创

当您检查尚未创建的属性时

改用ngAfterViewInit()

@Directive(
     selector: `input[type="text"], mat-select, mat-option`
 )
export class QaDirective implements OnInit 

   @Input('XXXqaName') qaName: string;

   constructor(private element: ElementRef)  

  ngOnChanges() 
    this.verifyQaNameAttr();
  

   verifyQa(): void 
   if (!this.qaName) 
   console.error('No "XXXqaName" provided for:',This.element.nativeElement);
   return;
   
  

【讨论】：

我尝试了 ngAfterViewInit 并重置了生命周期钩子仍然没有得到，但 ng-reflect-XXXqaName 存在.. 如果 (!this.qaName) 成功并且特定元素打印错误。

什么是“生命周期钩子的重置”？你能在stackblitz.com演示吗？

用 ngAfterViewInit() 检查，然后用 ngAfterViewInit... 确定我会做 stackblitz

stackblitz.com/edit/… 检查html模板时找不到属性

您可以使用ngOnChanges 或使qaName 成为getter/setter 并将代码放入setter stackblitz.com/edit/angular-liu612?file=app/directive/…