Búsqueda de sitios web

javascript - Cómo cerrar un cuadro `div` en Angular cuando hago clic fuera de él. Sin usar jQuery

Estoy trabajando en un sitio que ha sido creado usando Angular. En la página de inicio tengo un Cuadro de Servicio que contiene íconos que nos redirigen a diferentes páginas. Actualmente, cuando hago clic en el ícono del cuadro de servicio, se muestra el cuadro de servicio:

Ahora, cada vez que hago clic fuera de él, no se cierra. No estoy usando jQuery en mi proyecto. He visto muchas respuestas para AngularJs, pero ninguna funcionó.

Aquí está mi código para service-box.component.html:

<button mat-icon-button (click)="opened = !opened">
        <mat-icon>apps</mat-icon>
    </button>
    <div class="box" [class.opened]="opened">
        <div class="tip">
            <div class="border"></div>
            <div class="foreground"></div>
        </div>
    <div class="services">
        <div class="row">
            <a href="https://blog.fossasia.org">
                <div class="col">
                    <div class="img">
                        <img src="assets/images/blog.png" alt="Fossasia">
                    </div>
                    <span>Blogs</span>
                </div>
            </a>
            <a href="https://github.com/fossasia/loklak_search">
                <div class="col">
                    <div class="img">
                        <img src="assets/images/github.png" alt="Fossasia">
                    </div>
                    <span>Github</span>
                </div>
            </a>
            <a href="https://github.com/fossasia/loklak_search/issues">
                <div class="col">
                    <div class="img">
                        <img src="assets/images/bug.png" alt="Fossasia">
                    </div>
                    <span>Bug Report</span>
                </div>
            </a>
        </div>
    </div>
    <hr />
        <div class="services">
            <div class="row">
                <a href="https://fossasia.org/">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/fossasia_logo_55x22.png" width="55" height="22" alt="Fossasia">
                        </div>
                        <span>FOSSASIA</span>
                    </div>
                </a>
                <a href="https://phimp.me">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/phimpme_64x64.png" width="50" height="50" alt="Phimpme">
                        </div>
                        <span>Phimpme</span>
                    </div>
                </a>
                <a href="https://susper.com/">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/susper_60x16.png" width="60" height="16" alt="Susper">
                        </div>
                        <span>Susper</span>
                    </div>
                </a>
            </div>
            <div class="row">
                <a href="https://chat.susi.ai/">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/susi_60x12.png" width="60" height="12" alt="Susi.AI">
                        </div>
                        <span>Susi.AI</span>
                    </div>
                </a>
                <a href="https://pslab.fossasia.org/">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/pslab_64x68.png" width="50" height="50" alt="PSLab">
                        </div>
                        <span>PSLab</span>
                    </div>
                </a>
                <a href="https://eventyay.com/">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/eventyay.png" width="60" height="18" alt="Eventyay">
                        </div>
                        <span>Eventyay</span>
                    </div>
                </a>
            </div>
        </div>
    </div>

service-box.component.ts contiene solo una variable pública opened establecida en false por defecto.
He intentado envolver todo el código de service-box.component.html en un div y usar el evento (focusout) así:

<div id="side-menu" (focusout)="opened=false">
//Rest of code as in service-box.component.html
</div>

Pero hacer esto desactiva los enlaces en el cuadro de servicio. Cualquier sugerencia será de gran ayuda.

Respuesta #1

Parece que estás usando @angular/material y con ello el CDK. Deberías probar el paquete Overlay del CDK.

El paquete overlay proporciona una forma de abrir paneles flotantes en la pantalla.

Al configurar el atributo hasBackdrop, la superposición creará un elemento de fondo (= todo lo que esté fuera de tu componente) y con ello un evento backdropClick @Output, al cual podrías vincular el cierre de tu "Caja de Servicio".

Artículos relacionados