Доступ к библиотеке angular из приложения angular - StaticInjectorError в компоненте angular с ElementRef в конструкторе

Question

Я создал angular библиотеку (названную ng-library), выполнив https://angular.io/guide/creating-libraries.

• Построил ее с помощью ng build ng-library
• Сделал это доступны для других angular приложений с использованием yarn link
• Создание приложения angular и связывание библиотеки с использованием yarn link ng-library

Я мог бы использовать компоненты и службы внутри модуля , Все хорошо!

Теперь я добавил новый компонент angular в ng-библиотеку, которая использует ElementRef.

import { Component, NgZone, Input, Output, forwardRef } from '@angular/core';
import { ChangeDetectionStrategy, ElementRef, EventEmitter } from '@angular/core';
@Component({
  selector: 'new-component',
  template: '<ng-content></ng-content>'
})
export class NewComponent {
  protected el: HTMLElement;

  constructor(r: ElementRef, protected z: NgZone) {
    this.el = r.nativeElement;
  }
}

Я пытался использовать этот компонент в angular созданном приложении. Я получаю сообщение об ошибке ниже.

AppComponent.html:1 ERROR NullInjectorError: StaticInjectorError(AppModule)[NewComponent-> ElementRef]: 
  StaticInjectorError(Platform: core)[NewComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!
    at NullInjector.get (http://localhost:4200/vendor.js:36417:27)
    at resolveToken (http://localhost:4200/vendor.js:51335:24)
    at tryResolveToken (http://localhost:4200/vendor.js:51261:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:51111:20)
    at resolveToken (http://localhost:4200/vendor.js:51335:24)
    at tryResolveToken (http://localhost:4200/vendor.js:51261:16)
    at StaticInjector.get (http://localhost:4200/vendor.js:51111:20)
    at resolveNgModuleDep (http://localhost:4200/vendor.js:62298:29)
    at NgModuleRef_.get (http://localhost:4200/vendor.js:63364:16)
    at resolveDep (http://localhost:4200/vendor.js:63895:45)

Вот как я добавил модуль в свое приложение Angular.

import { NgLibraryModule } from "ng-library";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, NgLibraryModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ошибка говорит, что поставщик для ElementRef недоступен. Как сделать ElementRef доступным в модуле NgModule, который находится внутри библиотеки Angular?

Спасибо Basanth

Answer 1

Вам необходимо использовать ElementRef с декоратором @ViewChild: Пример: @ViewChild('idOfTheDiv/ButtonAsInYourHTML',{ static: true }) private idOfTheDiv/Button:ElementRef;

Подробнее вы можете прочитать здесь https://alligator.io/angular/viewchild-access-component/