angular - 如何访问 Angular 中影子根元素下存在的 dom 元素

Question

<div>

<external-component>

#shadow-root

<div class="test">

<button value="submit"></button>

</div>

</external-component>

</div>

想要访问提交按钮。我尝试使用 ElementRef 我无法访问该元素，因为它存在于 shadowDom 下。如果有人可以帮助我解决这个问题。

Answer 1

您可以像下面这样查询：

constructor(ele: ElementRef){}

//Inside your function
const shadowRoot: DocumentFragment = this.ele.nativeElement.shadowRoot;
const Button = shadowRoot.querySelector('button');  

Answer 2

在 HTML 中，您需要使用 templateVariable 更新按钮

<button #buttonRef arr='value'></button>

然后，在组件中，您可以执行 aViewChild来获取引用和访问值。

@ViewChild('buttonRef', {static: true}) button: ElementRef<HTMLButtonElement>;

this.button您应该能够在您的 ts 代码中使用该按钮。

希望这可以帮助