Tengo un sitio web en el que se ejecuta el servicio de chat nítido y estoy tratando de hacer clic en el cuadro de chat de uno de los archivos mecanografiados de mi componente.
El cuadro de chat de crisp es un div con la identificación de crisp-client dentro de la etiqueta del body . ¿Cómo hago clic en él desde dentro de mi texto mecanografiado?
Puede usar el decorador ViewChild y pasar una variable de referencia de plantilla como una cadena y manipular el evento. Aquí hay un ejemplo simple de hacer clic en el Button 1 , que hace clic programáticamente en el Button 2 y, debido a ese clic, el texto del Button 2 cambia:
<button #button1 (click)="clickButton2()"> Click to change the text of Button 2 </button> <button #button2 (click)="changeText()">{{ buttonText }}</button> buttonText = 'Button 2'; @ViewChild('button2') button2: ElementRef<HTMLElement>; clickButton2() { let el: HTMLElement = this.button2.nativeElement; el.click(); } changeText() { this.buttonText="Changed!" }Aquí hay una demostración de Stackblitz
ACTUALIZAR
Puede acceder a elementos del cuerpo utilizando el objeto de document en Angular. De esta manera, puede lograr el clic del elemento que está dentro body . Aquí hay un ejemplo más en el que hago clic en el botón que está dentro del body de un componente.
<button (click)="handleClick()">Programatically click the button inside body</button> ngOnInit() { let btn = document.getElementById('main'); btn.addEventListener('click', (e: Event) => btn.innerHTML = "Clicked!"); } handleClick() { document.getElementById('main').click(); }índice.html
<html> <body> <my-app>loading</my-app> <button id="main">Click</button> </body> </html>Aquí hay una demostración de Stackblitz .
Inyectar Renderer2 en el constructor -
constructor(private renderer: Renderer2) {}Obtenga el elemento de cliente nítido en su componente:
let crispClient = this.renderer.selectRootElement('#crisp-client');Realizar evento click() -
crispClient.click();Demostración de trabajo aquí
Se agregó un método de prueba en div para verificar:
<div id="crisp-client" onClick="console.log('crisp client clicked')"></div>