Угловые элементы DOM не отображаются

Question

Привет! Я использую библиотеку пользовательского интерфейса (принудительно, проблема компании ..), которая предоставляет угловой компонент, который отображает форму.

Теперь я хочу отключить все поля ввода и кнопки внутри этой формы.Но компонент библиотеки не дает мне возможности передать параметр, чтобы изменить статус только для чтения.

Теперь у меня нет другого варианта заниматься грязным взломом DOM.Однако, похоже, это не работает.

Вот мой HTML моего собственного компонента, где я рендеринг компонента библиотеки:

<component-of-the-library #formComponent></component-of-the-library>

Теперь внутри моего собственного класса компонентов, я ссылаюсь на него:

@ViewChild('formComponent', {read: ElementRef}) formComponent: ElementRef;

Однако, когда я использую функцию nativeElement и функцию querySelectorAll (), я не вижу элементов кнопки:

ngAfterViewInit() {                
  console.log(this.formComponent.nativeElement);
 console.log(this.formComponent.nativeElement.querySelectorAll('button'))
}

В первой строке выводится DOM компонента библиотеки,Там я также вижу кнопки.

Однако вторая строка просто возвращает пустой NodeList.

Я что-то упустил?

Answer 1

Я смог прочитать узлы DOM, присутствующие в дочернем компоненте, из родительского компонента, используя ViewChild () https://stackblitz.com/edit/angular-edmyur?file=src%2Fapp%2Fapp.component.ts

Answer 2

РЕДАКТИРОВАТЬ: я вижу еще одну проблему.AfterViewChecked вызывается несколько раз ...

Я сам нашел ответ.Проблема заключается в LifeCycleHook.AfterViewInit работает для вашего собственного компонента, но не ожидает, пока дочерние компоненты завершат рендеринг.

Когда я использую AfterViewChecked, это работает!

Однако я все еще озадачен тем, что регистрация nativeElement всегда давала мне правильный DOM, даже если он все еще не отображается.

Answer 3

Вместо того, чтобы делать все это, придумайте наложение div и размер вашей формы и сделайте показ или скрытие его в зависимости от ваших потребностей.Это будет проще, чем отключение каждой формы ввода и кнопок.Кроме того, оверлей - это не компонент, а ваш div.