angolare 2 – come nascondere la barra di navigazione in alcuni componenti

Ho creato nav bar separatamente in nav.component.html come nascondere la barra di navigazione in alcuni componenti, come il login.componente.

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>

OriginaleL’autore User 123 | 2017-03-30

6 risposte

  1. 44

    Navbar controllo e la formattazione è spesso necessario nel corso di un’app, in modo che un NavbarService è utile. Iniettare in quei componenti di cui avete bisogno.

    navbar.servizio.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.componente.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>

    esempio.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();
    }
    grazie u sir ..il suo lavoro per me
    Grande, felici di aiutarti!
    Grazie per questo! Ho aggiunto una possibile estensione di questa risposta nella mia risposta qui sotto.
    Grazie ..il suo lavoro … 🙂
    Nessun dubbio che questa soluzione funziona. Ma idealmente, il servizio dovrebbe tenere chiamate API http relative roba piuttosto mostrare/nascondere logica!

    OriginaleL’autore Dan

  2. 3

    Aggiunta di Dan‘s risposta.

    Un dettaglio in più necessaria per una risposta completa. Che sta registrando il NavbarService come fornitore per l’intera applicazione da 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 { }

    OriginaleL’autore Shanika Ediriweera

  3. 2

    Aggiungere *ngIf=’!showNav’ nel modello

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

    E in LoginComponent

    showNav = true;

    Questo mostra nav resto di tutte le pagine , se si desidera nascondere in qualsiasi pagine appena messo showNav = true; in quel componente.

    Come funziona :

    Prima per verificare per showNav variabile, ma non sarà disponibile , così si restituisce false per le altre pagine in cui si desidera visualizzare il menu , quindi, bisogno di dichiarare la variabile di tutte le altre pagine.

    Nella pagina di login si imposta il valore su true, in modo rende false e nascondere il nav.

    la sua non funziona per me.
    Ho testato nel mio progetto e di lavoro grande , hai fatto qualche errore ?
    Non ricevo errori
    Non capisco perché si negare che boolean … showNav = false sarebbe un po ‘ più comprensibile …
    Questo funziona se si desidera semplicemente non hanno il nav HTML DOM, ma purtroppo i componenti ancora inizializzati, che può essere indesiderabile.

    OriginaleL’autore Vivek Doshi

  4. 2

    Mi piace questo risposta da Dan qui sopra. Tuttavia, crea qualche aggiornamento errori di console, che io non voglio in una produzione app. Vorrei suggerire invece l’utilizzo di questo metodo: risposta.

    Potrebbe anche essere utile utilizzare un canDeactivate per la completa attuazione. Dove ero nascondere la navbar, come al login, ho aggiunto un navigare lontano ‘canDeactive’ di servizio:

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

    Disattivare il servizio di simile a questo:

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

    Questo modo, posso nascondere solo su login e non è necessario chiamare show() ogni componente.

    Il tuo approccio è buono. Utilizzando questo approccio, l’ho implementato per nascondere il menu di intestazione e il componente login, l’intestazione e menu show home componente, ma il problema è quando si aggiorna la finestra del browser di nuovo header e menu sono nascosti dalla home componente. Io non sono sempre quello che esattamente il problema. Si prega di aiutare se possibile.

    OriginaleL’autore Sam

  5. 1

    In ordine per farlo funzionare anche aggiungere “Fornitori” ovunque si importano i NavbarService

    navbar.componente.ts e anche esempio.componente.ts

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

    OriginaleL’autore Kenni

  6. 0

    È possibile utilizzare ngIF direttiva sulle componenti dove nav è situato

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

    dopo si ottiene il percorso attuale:

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

    OriginaleL’autore happyZZR1400

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *