typescript - Hur kan jag få åtkomst till DOM-element som finns under shadow root-elementet i Angular

<div>

<external-component>

#shadow-root

<div class="test">

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

</div>

</external-component>

</div>

Vill komma åt skicka-knappen. Jag har försökt använda ElementRef men jag kan inte komma åt elementet, eftersom det finns under shadowDom. Om någon kan hjälpa mig med detta.

Svar #1

Du kan göra en förfrågan som nedan:

constructor(ele: ElementRef){}

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

Svar #2

I HTML behöver du uppdatera knappen med en templateVariable

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

Sedan kan du i komponenten använda en ViewChild för att få referensen och komma åt värdena.

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

Du bör kunna komma åt knappen med this.button i din ts-kod.

Hoppas detta hjälper

Relaterade artiklar