Пользовательская директива Angular: NullInjectorError: StaticInjectorError (AppModule) [MatInput -> ElementRef]

Мое приложение Angular не компилируется из-за приведенной ниже ошибки. Я не уверен, почему. Я только что обновился до Angular 8, но я обновил и переустановил зависимости материалов.

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

Обновлять

Хорошо, это, по-видимому, из-за директивы, которую я создал. Если я удалю ссылку на директиву, ошибка будет устранена. В моей директиве должна быть проблема с инъекцией.

Испортит ли расположение файла исходные конфигурации angular? Например, командная строка создает службу в корневом каталоге приложения. Я переместил свои службы в папку «услуги». Будет ли это проблемой?

Это учебник, который я использовал для создания этой директивы.

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

./приложение.компонент.html - здесь я вызываю директиву

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

директивы/удалить-если-функция-off.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);
    }
  }
}

услуги/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);
  }
}

Трассировки стека:Пользовательская директива Angular: NullInjectorError: StaticInjectorError (AppModule) [MatInput -&gt; ElementRef]

У меня были проблемы с ядром платформы и провайдерами при использовании npm link. Связаны ли какие-либо из ваших узловых модулей?

Reactgular 06.06.2019 21:11

@Reactgular, я сам не связывал модули. Как мне перепроверить это?

ExceptionLimeCat 06.06.2019 21:16

Если бы вы это сделали, вы бы вспомнили, но вот вам помощь. stackoverflow.com/questions/24933955/…

Reactgular 06.06.2019 21:19

попробуйте изменить private el: ElementRef тоже private el: ElementRef<HTMLElement>. Не уверен, что это поможет.

Reactgular 06.06.2019 21:20

Нет ссылки на node_modules.

ExceptionLimeCat 06.06.2019 21:31

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

Alex K 06.06.2019 21:46

@AlexK приносит тепло! Вот и все. Я удалил ссылку на ElementRef, и мы готовы к работе. Если вы хотите создать ответ, я отмечу его как правильный.

ExceptionLimeCat 06.06.2019 21:50
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
7
1 380
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вероятно, вы не импортируете MatInputModule в модуль:

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

Я импортирую этот модуль в свой корневой модуль. Я предоставил обновленную информацию по моей проблеме.

ExceptionLimeCat 06.06.2019 21:14
Ответ принят как подходящий

Вы не можете внедрить ElementRef в сервис Angular.

ElementRef можно внедрять в директивы и компоненты, потому что они связаны с одним элементом в DOM. Сервисы не связаны ни с одним элементом, поэтому внедрение ElementRef не удастся.

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

Другие вопросы по теме