Внедрить хост-компонент в директиву (материал)

Question

Я могу добавить компонент в конструктор директивы, как это:

constructor(private hello: HelloComponent) {
  console.log(hello.test)
}

Это хорошо работает, но моя директива должна работать специально с Mat-Select, поэтому я пытаюсь что-то вроде этого:

constructor(private matSelect: MatSelect) {
  console.log(matSelect)
}

этот способ не работает:

Error: StaticInjectorError(AppModule)[SelectSearchDirective -> MatSelect]: 
StaticInjectorError(Platform: core)[SelectSearchDirective -> MatSelect]: 
NullInjectorError: No provider for MatSelect!

Есть ли способ доступа к MatSelect (мне нужно поиграть с [(value)])

Заранее спасибо.

Stackblitz: https://stackblitz.com/edit/material-tooltip-select-search?file=src%2Fapp%2Fapp.component.html

Answer 1

для доступа ко всем свойствам на коврике выберите, что вам нужно сделать import {MatSelect} from '@angular/material'; затем в компоненте, @ViewChild('myTemplateReference') select: MatSelect;

в html, вам просто нужно добавить ссылку на шаблон

 <mat-select #myTemplateReference [(ngModel)]="value">

со всем этим, свойство select теперь дает вам все методы и свойства mat select.

но если все, что вам нужно, это значение, то почему бы просто не использовать [(ngModel)]="value"

затем при изменении выбора используйте (selectionChange)="doSomething()"

doSomething(){

    this.value...
}

Answer 2

Вы можете получить к нему доступ, используя ElementRef.

Внедрить ElementRef в вашу Директиву как зависимость:

import { ..., ElementRef, ... } from '@angular/core';
...
constructor(private el: ElementRef) {}

Теперь вы можете использовать this.el в вашей директиве для доступа к MatSelect.