角DOM元素未顯示

Question

嗨，我正在使用UI庫（強制發布到公司。），該庫提供了一個Angular組件，該組件呈現了一個表單。

現在，我想禁用此表單內的所有輸入字段和按鈕。 但是庫的組件無法為我提供傳遞參數以將狀態更改為只讀的可能性。

現在，我沒有其他選擇可以進行骯臟的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

除了完成所有這些操作之外，還可以使用div覆蓋圖和表單大小，然后根據需要顯示或隱藏它。 這比禁用每個表單輸入和按鈕要容易。 另外，疊加層不是組件，而是您的div。

Answer 2

我能夠使用ViewChild（）從父組件讀取子組件中存在的DOM節點https://stackblitz.com/edit/angular-edmyur?file=src%2Fapp%2Fapp.component.ts

Answer 3

編輯：我看到另一個問題。 AfterViewChecked被多次調用...

我自己找到了答案。 問題是LifeCycleHook。 AfterViewInit適用於您自己的組件，但不等待子組件完成渲染。

當我使用AfterViewChecked時，它可以工作！

但是，我仍然感到困惑，盡管記錄nativeElement始終沒有提供正確的DOM，但始終為我提供了正確的DOM。