El control y el formateo de la barra de navegación a menudo son necesarios en una aplicación, por lo que un NavbarService es útil. Inyecte en aquellos componentes donde lo necesite.

barra de navegación.servicio.ts:

 import { Injectable } from '@angular/core'; @Injectable() export class NavbarService { visible: boolean; constructor() { this.visible = false; } hide() { this.visible = false; } show() { this.visible = true; } toggle() { this.visible = !this.visible; } doSomethingElseUseful() { } ... }

barra de navegación.component.ts:

 import { Component } from '@angular/core'; import { NavbarService } from './navbar.service'; @Component({ moduleId: module.id, selector: 'sd-navbar', templateUrl: 'navbar.component.html' }) export class NavbarComponent { constructor( public nav: NavbarService ) {} }

barra de navegación.componente.html:

 <nav *ngIf="nav.visible"> ... </nav>

ejemplo.componente.ts:

 import { Component, OnInit } from '@angular/core'; import { NavbarService } from './navbar.service'; @Component({ }) export class ExampleComponent implements OnInit { constructor( public nav: NavbarService ) {} } ngOnInit() { this.nav.show(); this.nav.doSomethingElseUseful(); }

Pude resolver esto sin usar un servicio de navegación/barra de herramientas agregando un objeto de datos a la ruta en route.module. Amplié el ejemplo de Todd Motto de agregar títulos dinámicos a una página y agregué la toolbar: false/true al objeto de datos en mi camino. Luego me suscribí a los eventos del enrutador en mi barra de herramientas.componente. Usando la función de escucha de eventos de Todd, leí el objeto de la ruta y usé el valor booleano para configurar la barra de herramientas visible o no visible.

No se necesita servicio y funciona en pagerefresh.

módulo de enrutamiento

 ... const routes: Routes = [ { path: 'welcome', component: WelcomeComponent, data: { title: 'welcome', toolbar: false} }, ...];

barra de herramientas.componente

 constructor(private router: Router, private activatedRoute: ActivatedRoute, public incallSvc: IncallService) { this.visible = false; // set toolbar visible to false } ngOnInit() { this.router.events .pipe( filter(event => event instanceof NavigationEnd), map(() => this.activatedRoute), map(route => { while (route.firstChild) { route = route.firstChild; } return route; }), ) .pipe( filter(route => route.outlet === 'primary'), mergeMap(route => route.data), ) .subscribe(event => { this.viewedPage = event.title; // title of page this.showToolbar(event.toolbar); // show the toolbar? }); } showToolbar(event) { if (event === false) { this.visible = false; } else if (event === true) { this.visible = true; } else { this.visible = this.visible; } }

barra de herramientas.html

 <mat-toolbar color="primary" *ngIf="visible"> <mat-toolbar-row> <span>{{viewedPage | titlecase}}</span> </mat-toolbar-row> </mat-toolbar>

Agregando a la respuesta de Dan .

Se requiere un detalle más para una respuesta completa. Que está registrando NavbarService como proveedor para toda la aplicación desde app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { SharedModule } from './shared/shared.module'; import { AppComponent } from './app.component'; import { NavbarModule } from './navbar/navbar.module'; import { NavbarService } from './navbar/navbar.service'; import { AppRoutingModule, routedComponents } from './routing.module'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, NavbarModule, SharedModule, AppRoutingModule ], declarations: [ routedComponents, ], providers: [ // Here we register the NavbarService NavbarService ], bootstrap: [AppComponent] }) export class AppModule { }