角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。