En mi proyecto Angular-13, cuando un usuario inicia sesión correctamente, se le redirige al panel. Luego, en el encabezado de navegación del tablero, el usuario puede cerrar sesión:

encabezado.componente.ts:

 signOut() { this.router.navigate(['/auth']) }

encabezado.componente.html:

 <li class="nav-item dropdown user-menu"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"> <img src="assets/img/user2-160x160.jpg" class="user-image img-circle elevation-2" alt="User Image"> <span class="d-none d-md-inline">Alexander Pierce</span> </a> <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right"> <!-- User image --> <li class="user-header bg-primary"> <img src="assets/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image"> </li> <!-- Menu Footer--> <li class="user-footer"> <a href="#" class="btn btn-default btn-flat">Profile</a> <a class="btn btn-danger btn-flat float-right" (click)="signOut()">Sign out</a> </li> </ul> </li>

Espero que cuando haga clic en el menú de usuario desplegable del elemento de navegación , debería desplegarse y mostrar el cierre de sesión. Entonces el usuario debería poder cerrar sesión.

En lugar de redireccionar a la página de inicio.

Cuando cambié # a javascript: void(0); el menú desplegable no respondió.

¿Cómo resuelvo esto?

Gracias