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（）https://stackblitz.com/edit/angular-edmyur?file=src%2Fapp%2Fapp.component.ts

从父组件读取子组件中存在的DOM节点。

Answer 3

编辑：我看到另一个问题。 AfterViewChecked被多次调用...

我自己找到了答案。问题是LifeCycleHook。 AfterViewInit适用于您自己的组件，但不等待子组件完成渲染。

当我使用AfterViewChecked时，它可以工作！

但是，我仍然感到困惑，即使没有被渲染，记录nativeElement总是给我正确的DOM。

角DOM元素未显示

3 个答案: