自定义角度指令：NullInjectorError：StaticInjectorError（AppModule）[MatInput-> ElementRef]

Question

由于以下错误，我的Angular应用无法编译。我不知道为什么。我确实升级到了Angular 8，但是我已经更新并重新安装了Material依赖项。

NullInjectorError:StaticInjectorError(AppModule)[MatInput -> ElementRef]: 
 StaticInjectorError(Platform: core) [MatInput -> ElementRef]: 
   NullInjectorError: No provider for ElementRef!

更新

好的，这显然是由于我创建了一个指令。如果删除对指令的引用，则错误将得到解决。我的指令中肯定有注入问题。

文件位置是否会弄乱角度初始配置？例如，命令行在应用程序根目录中生成服务。我已经将服务移至“服务”文件夹。这会是个问题吗？

这是我用来构建此指令的教程。

https://devblogs.microsoft.com/premier-developer/angular-how-to-implement-feature-flags/

./ app.component.html -这是我调用指令

<div>
  <app-compliance-review [myRemoveIfFeatureOff]="'compliancerev'" compliancerev="true"></app-compliance-review>
</div>

指令/删除-如果功能关闭.directive.ts

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { FeatureFlagService } from '../services/feature-flag.service';

@Directive({
  selector: '[myRemoveIfFeatureOff]'
})
export class MyRemoveIfFeatureOffDirective implements OnInit {
  @Input('myRemoveIfFeatureOff') featureName: string;

  constructor(private el: ElementRef,
              private featureFlagService: FeatureFlagService) {
  }

  ngOnInit() {
    if (this.featureFlagService.featureOff(this.featureName)) {
      this.el.nativeElement.parentNode.removeChild(this.el.nativeElement);
    }
  }
}

services / feature-flag.service.ts

import { Injectable, ElementRef } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FeatureFlagService {

  constructor(private elementRef:ElementRef){}

  featureOff(featureName: string) {
    // Read the value from the root element
    if (this.elementRef.nativeElement.hasOwnProperty(featureName)) {
      let sFlag: string = this.elementRef.nativeElement.getAttribute(featureName);
      let bFlag: boolean = (sFlag =="true");
      return !bFlag;
    }
    return true; // if feature not found, default to turned off
  }

  featureOn(featureName: string) {
    return !this.featureOff(featureName);
  }
}

StackTrace：

Answer 1

您无法将ElementRef注入Angular服务。

ElementRef可以注入指令和组件中，因为它们与DOM中的单个元素相关联。服务未与任何给定元素相关联，因此注入ElementRef将失败。

如果您需要从服务函数访问ElementRef实例，则需要将引用作为函数参数传递。

Answer 2

这可能是您没有将MatInputModule导入模块：

@NgModule({
  imports: [MatInputModule]
})
export class AppModule {}