web-dev-qa-db-fra.com

angular 2 - Comment masquer la barre de navigation de certains composants

J'ai créé la barre de navigation séparément dans nav.component.html, comment masquer la barre de navigation dans certains composants tels que login.component.

nav.component.html

<nav class="navbar navbar-default navbar-fixed-top navClass">
    <div class="container-fluid">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                        (click)="toggleState()">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
         <div class="collapse navbar-collapse"
              [ngClass]="{ 'in': isIn }">
          enter code here   <ul class="nav navbar-nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#">about</a></li>

            </ul>

        </div>
    </div>
</nav>
htmlangular
17
User 123

Le contrôle et le formatage de la barre de navigation sont souvent nécessaires dans une application. Un service Navbar est donc utile. Injectez dans les composants où vous avez besoin.

navbar.service.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() { }

  ...
}

navbar.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 ) {}
}

navbar.component.html:

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

example.component.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();
}
54
Dan

Ajout à la réponse de Dan .

Un détail supplémentaire requis pour une réponse complète. Qui enregistre le NavbarService en tant que fournisseur pour l’application entière à partir de 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 { }
5
Shanika Ediriweera

J'aime cette réponse par Dan ci-dessus. Cependant, cela crée des erreurs de console de mise à jour, ce que je ne souhaite pas dans une application de production. Je suggérerais plutôt d'utiliser cette méthode: réponse .

Il peut également être utile d’utiliser un canDeactivate pour terminer la mise en œuvre. Là où je cachais la barre de navigation, comme lors de la connexion, j'ai ajouté un service de navigation 'canDeactive':

{ path: 'login', component: LoginComponent, canDeactivate: [NavigateAwayFromLoginDeactivatorService]  },

Le service de désactivation ressemble à ceci:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { LoginComponent } from "app/user/login/login.component";
import { NavbarTopService } from "app/navbar-top/navbar-top.service";

@Injectable()
export class NavigateAwayFromLoginDeactivatorService implements CanDeactivate<LoginComponent> {

  constructor(public nav: NavbarTopService) {  }

  canDeactivate(target: LoginComponent) {
    this.nav.show();
    return true;
  }
}

De cette façon, je ne peux me cacher que lors de la connexion et je n'ai pas besoin d'appeler show() sur tous les autres composants.

2
trees_are_great

J'ai pu résoudre ce problème sans utiliser un service de navigation/barre d'outils en ajoutant un objet de données à l'itinéraire dans route.module. J'ai développé exemple de Todd Motto pour l'ajout de titres dynamiques à une page et ajouté toolbar: false/true à l'objet de données dans mon chemin. Je me suis ensuite abonné aux événements de routeur dans mon toolbar.component. À l'aide de la fonction d'écoute d'événement de Todd, j'ai lu l'objet Path et utilisé la valeur booléenne pour définir la barre d'outils visible ou non visible.

Aucun service nécessaire et fonctionne sur pagerefresh.

module de routage

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

toolbar.component

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;
    }
  }

toolbar.html

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

Ajouter * ngIf = '! ShowNav' dans le modèle

<nav class="navbar navbar-default navbar-fixed-top navClass" *ngIf='!showNav' >

Et dans LoginComponent

showNav = true;

Cela affichera le reste de la navigation de toutes les pages, si vous voulez vous cacher dans les pages, mettez simplement showNav = true; dans cette composante.

Comment ça marche:

D'abord, il vérifiera la variable showNav mais elle ne sera pas disponible. Par conséquent, elle retournera la valeur false pour les autres pages sur lesquelles nous voulons afficher le menu.

Dans la page de connexion, nous définissons la valeur sur true. Elle sera donc fausse et masquera la navigation.

1
Vivek Doshi

Vous pouvez utiliser la directive ngIF sur les composants où se trouve nav

   <nav *ngIf="this.currentRoute!=='login'" navigation>
   </nav>

après avoir obtenu l'itinéraire actuel:

  this.router.events.subscribe(event => {
  if (event.constructor.name === "NavigationEnd") {
    this.name = (<any>event).url.split("/").slice(-1)[0];
    this.isLogin = this.currentRoute === 'login';
  }
})
1
happyZZR1400

Pour que cela fonctionne, ajoutez également des "Fournisseurs" partout où vous importez le NavbarService.

navbar.component.ts et aussi example.component.ts

@Component({
  moduleId: module.id,
  selector: 'sd-navbar',
  templateUrl: 'navbar.component.html',
  providers: [NavbarService ]
})
1
Kenni

Une autre solution à ce problème, en particulier si vous souhaitez ouvrir/fermer/basculer/la barre de navigation latérale à partir d'autres contrôles, consiste à conserver une référence à la barre de navigation latérale dans un service, comme indiqué ci-dessous:

https://stackoverflow.com/a/48076331/1013544

cela fonctionnait bien pour moi car j'avais une application où la navigation latérale ressemblait davantage à l'élément racine et les composants du routeur en contenaient le contenu, de sorte qu'ils seraient désactivés en arrière-plan lorsque le menu de navigation latérale est ouvert.

0
JaganY