Question

所以我正在创建一个指令来测试某个字段（即输入字段）的值。

我要弄清楚的是：

@Directive({
  selector: 'toi-text-field input'
})
export class InputCheckDirective {
 @Input() color: string;
 @Input() minValue: number;
  constructor(private el: ElementRef) {
   }
}

在这里您可以看到选择器是“ toi-text-field input”，它将以toi-text-field组件内的输入元素为目标。

现在我正在寻找的是一种以某种方式（可能作为输入值）传递此选择器字符串的方法，以便我可以在更高级别上确定要寻找的元素例如：

'article p'

以便该指令将在文章中查找p元素

欢呼！

我的元素：（由封装）

<toi-text-field> ... comp ... </toi-text-field>


<label
  *ngIf="label"
  class="toi-textfield__label"
  for="{{id}}">
  {{label}}
</label>
<input
  [(ngModel)]="value"
  [ngModelOptions]="modelOptions"
  (ngModelChange)="onValueChange($event)"
  type="text"
  class="toi-textfield__input"
  placeholder="{{placeholder}}"
  [color]="color"
  [minValue]="minValue"
  [disabled]="disabled">

我的指令：

在这里，如果输入字段中的值小于minValue，则将文本的颜色设置为红色

import { Directive, ElementRef, Input, HostListener, ViewChild, AfterViewInit } from '@angular/core';

@Directive({
  selector: 'toi-text-field input'
})
export class InputCheckDirective {
 @Input() color: string;
 @Input() minValue: number;
  constructor(private el: ElementRef) {
   }
   @HostListener('blur') onBlur(): void {
     console.log('in blur');
     console.log(this.el);
    if (Number(this.el.nativeElement.attributes[4].value) < Number(this.minValue)) {
     this.el.nativeElement.style.color = this.color;
    } else {
     this.el.nativeElement.style.color = '#000';
 }
}

  @HostListener('focus') onfocus():void {

  }
}

由于使用了预定义的选择器，因此没有收到atm错误，但我一直在寻找一种使任何给定元素（不仅是输入元素）都具有泛型的方法。

是否可以为角度指令传递选择器字符串，以便该指令对多个组件通用

0 个答案: