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

您可以使用ElementRef对其进行访问。

在指令中插入ElementRef作为依赖项：

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

您现在可以在指令中使用this.el来访问MatSelect。

Answer 2

要访问垫子上的所有属性，请选择要执行的操作 import {MatSelect} from '@angular/material'; 然后在组件中， @ViewChild('myTemplateReference') select: MatSelect;

在html上，您只需要添加模板引用

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

所有这些，select属性现在为您提供了垫选择的所有方法和属性。

但是如果您只需要值，为什么不只使用[(ngModel)]="value"

然后在选择更改时使用(selectionChange)="doSomething()"

doSomething(){

    this.value...
}

在指令中注入主机组件（材料）

2 个答案: