Estoy usando el enlace de clase para agregar y eliminar clases en función del clic del botón de la barra lateral para minimizar y maximizar la barra lateral. Necesito la misma funcionalidad para agregar y eliminar la clase en el componente de pie de página también para maximizar y minimizar el ancho del pie de página en función del clic realizado en el componente de la barra lateral.
barra lateral.componente.html
<nav class="sidebar-container" [ngClass]="minimize ? 'minimize' : ''"> <ul> <li class="sidebar-minimize"> <a (click)="clickEvent()">Minmax</a> </li> </ul> </nav>sidebar.component.ts
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.scss'] }) export class SidebarComponent implements OnInit { minimize: boolean = false; ngOnInit(): void { } clickEvent() { this.minimize = !this.minimize; } }Pero necesito que se realicen las mismas acciones en el componente de pie de página para agregar otra clase CSS a través del enlace de clase seguido del mismo método clickEvent() porque en mi situación, el componente de la barra lateral y los componentes del pie de página son interdependientes en esta función clickEvent()
Por ejemplo,
<footer (click)="clickEvent()" [ngClass]="minimize ? 'minimize':''"> <p>footer works</p> </footer>¿Es posible usar la misma función clickEvent () en el componente de pie de página para el enlace de clase?
Entonces, en este caso, puede usar un servicio. Por ejemplo, en su servicio tiene una propiedad como la siguiente:
@Injectable({ providedIn: 'root' }) export class TestService { private minimize: boolean; public minimizeSubject: Subject<void>; constructor() { this.minimizeSubject = new Subject<void>(); this.minimize = false; } set setMinimize(minimize: boolean) { this.minimize = minimize; this.minimizeSubject.next(); }El componente de la barra lateral debería tener el siguiente aspecto:
export class SidebarComponent{ public minimize: boolean; constructor(private testService: TestService) { this.minimize = false; } public onClicked(): void { this.minimize = !this.minimize; this.testService.setMinimize = this.minimize; }Al final, el componente de pie de página:
export class FooterComponent implements OnInit, OnDestroy { private subscription: Subscription; constructor(private testService: TestService) { this.subscription = new Subscription(); } ngOnInit(): void { this.subscription = this.testService.minimizeSubject.subscribe(minimize => { this.minimize = minimize; }); } ngOnDestroy(): void { this.subscription.unsubscribe(); }