Puede crear un servicio compartido que se inyecte tanto en el componente de la aplicación como en cualquier otra página que necesite ocultar el componente de navegación.

Ejemplo de un servicio compartido que expone una alternancia observable:

mostrar.servicio.ts

 @Injectable({ providedIn: 'root' }) export class DisplayService { public constructor() { this.showNavigation$ = this.showNavigation.asObservable(); } public showNavigation$: Observable<boolean>; private showNavigation: Subject<boolean> = new Subject<boolean>(); public setNavigationVisibility(visible: boolean): void { this.showNavigation.next(visible); } }

Este servicio expone un observable al que se puede suscribir y un método para emitir valores a través del observable.

Los componentes en los que desea ocultar la barra de navegación ocultarían la barra de navegación en ngOnInit y la mostrarían nuevamente en ngOnDestroy .

componente.ts

 @Component({ selector: 'app-hide-navigation', template: `<p>COMPONENT</p>`, }) export class HideNavigationComponent implements OnInit, OnDestroy { constructor(private displayService: DisplayService) { } ngOnInit(): void { this.displayService.setNavigationVisibility(false); } ngOnDestroy(): void { this.displayService.setNavigationVisibility(true); } }

El componente de su aplicación podría suscribirse al observable y establecer la visibilidad en consecuencia:

aplicación.componente.ts

 @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { constructor(private displayService: DisplayService) {} showNavigation = true; private destroyed: Subject<void> = new Subject<void>(); ngOnInit(): void { this.displayService.showNavigation$ .pipe(takeUntil(this.destroyed)) .subscribe((visible: boolean) => { this.showNavigation = visible; }); } ngOnDestroy(): void { this.destroyed.next(); } }

aplicación.componente.html

 <app-navigation *ngIf="showNavigation"></app-navigation> <router-outlet></router-outlet>

El beneficio de usar un observable como este es que puede combinarlo fácilmente con una estrategia de detección de cambios OnPush en lugar de enlazar directamente con una propiedad boolean pública en el servicio.

Demostración de Stackblitz: https://stackblitz.com/edit/angular-ivy-dk5gi8?file=src/app/app.component.html

Puedes intentar algo como esto:

Agregue una condición a la etiqueta app-navigation , sobre cuándo debe mostrarse. El valor puede ser de cualquier servicio.

 <app-navigation *ngIf="appNavigationService.show"></app-navigation>

Y, en el componente del que no desea mostrar la barra de navegación, dentro de <router-outlet> puede establecer el valor de ese campo en la clase de servicio como false . Y una vez que salga del componente, probablemente en ngOnDestroy pueda volver a establecerlo en true . Y también, tener el valor como true por defecto.