Как я могу получить доступ к свойству какой-либо директивы из другой директивы

#angular #angular-directive

Вопрос:

У меня есть одна директива

 import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appDirOne]',
  exportAs: 'appDirOne'
})
export class DirOneDirective {
  status: boolean = false;
  constructor() { }
}

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

   <button appDirTwo>Btn</button>

ВТОРАЯ ДИРЕКТИВА

 import { DirOneDirective } from './dir-one.directive';

@Directive({
  selector: '[appDirTwo]',
  exportAs: 'appDirTwo'
})
export class DirTwoDirective {
  @HostListener('click') onClick() {
    // access to the status property value of the directiveOne
  }

}

ЧТО Я ПЫТАЛСЯ

я попытался добавить его в конструктор

 import { DirOneDirective } from './dir-one.directive';

@Directive({
  selector: '[appDirTwo]',
  exportAs: 'appDirTwo'
})
export class DirTwoDirective {
  constructor(private directiveOne: DirOneDirective) { }
  @HostListener('click') onClick() {
  }

}

но я понимаю

core.js:4197 ERROR NullInjectorError: R3InjectorError(AppModule)[DirOneDirective -> DirOneDirective -> DirOneDirective]: NullInjectorError: No provider for DirOneDirective!

ошибка.

Я хочу упомянуть, что обе директивы находятся в моем app.module.ts файле.

Если я попытаюсь использовать свой директив, например, в HTML

   <button appDirOne>Btn</button>

тогда у меня нет этого сообщения об ошибке поставщика.
Это происходит только тогда, когда я пытаюсь ввести as service в другие директивы.

Ответ №1:

Прежде всего, вам нужно рассмотреть другой подход для этого . Например, пожалуйста, прочитайте официальный документ о передаче входных данных директивам атрибутов или используйте подход служб.

Но вернемся к нашему вопросу. Это действительно плохой совет, но вы можете импортировать свой DirOneDirective в DirTwoDirective и создать экземпляр DirOneDirective , например, в constructor из DirTwoDirective . Что-то вроде:

Первая директива:

 @Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  status: boolean = false;
  constructor(private el: ElementRef) {}
}

Вторая директива:

 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Directive({
  selector: '[appHighweight]'
})
export class HighweightDirective {
  constructor(private el: ElementRef) {
    const highLDir = new HighlightDirective(this.el);
    console.log(highLDir.status); // false
  }
}

Пример Стекблитца