Можно ли передать строку селектора для угловой директивы, чтобы эта директива была общей для нескольких компонентов - PullRequest
Новая
       27

Можно ли передать строку селектора для угловой директивы, чтобы эта директива была общей для нескольких компонентов

0 голосов
/ 02 июля 2019

поэтому я создаю директиву для проверки значения некоторого поля (т.е. поля ввода).

То, что я пытаюсь выяснить, это: 

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

здесь вы можете видеть, что селектором является 'ввод текста в текстовое поле', который нацелен на элемент ввода в компоненте текстового поля.

Теперь я искал способ передачи этой строки селектора каким-либо образом (возможно, в качестве входного значения), чтобы я мог на более высоком уровне определить, какой элемент искать например: 

'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 {

  }
}

Я не получаю сообщение об ошибке, поскольку я использую предопределенный селектор, но я искал способ сделать это универсальным для любого данного элемента, а не только для элемента ввода.

...