angular 2: cómo ocultar la barra de navegación en algunos componentes

Mantén la atención porque en esta crónica encontrarás la contestación que buscas.Este escrito fue aprobado por nuestros expertos para garantizar la calidad y veracidad de nuestro contenido.

Solución:

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:

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é 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

  
    viewedPage 
  

Agregando a la respuesta de Dan.

Se requiere un detalle más para una respuesta completa. que está registrando el NavbarService como proveedor de 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  

Si te ha resultado de provecho nuestro artículo, sería de mucha ayuda si lo compartes con más entusiastas de la programación y nos ayudes a dar difusión a este contenido.

---

---

Utiliza Nuestro Buscador