Angular 2 - как скрыть навигационную панель в некоторых компонентах

Ответ 1

Управление и форматирование Navbar часто требуется во всем приложении, поэтому NavbarService полезен. Внесите в те компоненты, где вам нужно.

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

Ответ 2

Добавление в Dan ответа.

Для получения полного ответа требуется еще одна деталь. Что регистрирует NavbarService как поставщика всего приложения из 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 { }

Ответ 3

Добавить * ngIf = '! showNav' в шаблоне

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

И в LoginComponent

showNav = true;

Это отобразит остальную часть всех страниц, если вы хотите скрыть на каких-либо страницах, просто введите showNav = true; в этот компонент.

Как это работает:

Сначала для него будет проверяться переменная showNav, но она не будет доступна, поэтому она вернет false для других страниц, где мы хотим показать меню, поэтому вам нужно объявить эту переменную любыми другими страницами.

На странице входа мы устанавливаем значение в значение true, поэтому оно сделает его ложным и скроет навигацию.

Ответ 4

Мне нравится этот ответ Дэн выше. Тем не менее, он создает некоторые ошибки консоли управления, которые я не хочу в производственном приложении. Вместо этого я бы предложил использовать этот метод: answer.

Также может быть полезно использовать canDeactivate для завершения реализации. Когда я скрывал навигатор, например, при входе в систему, я добавил навигацию "canDeactive":

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

Служба деактивации выглядит так:

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

Таким образом, я могу скрывать только при входе в систему и не нужно вызывать show() для каждого другого компонента.

Ответ 5

Чтобы он работал, также добавляйте "Провайдеры", где бы вы ни импортировали NavbarService

navbar.component.ts, а также example.component.ts

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

Ответ 6

Вы можете использовать директиву ngIF для компонентов, где находится nav.

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

после получения текущего маршрута:

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

Ответ 7

Я смог решить эту проблему без использования службы навигации/панели инструментов, добавив объект данных к маршруту в route.module. Я расширил пример девиза Тодда по добавлению динамических заголовков на страницу и добавил toolbar: false/true для объекта данных в моем пути. Затем я подписался на события маршрутизатора в моем toolbar.component. Используя функцию прослушивания событий Todd, я прочитал объект path и использовал логическое значение, чтобы установить панель инструментов видимой или невидимой.

Сервис не требуется и работает на pagerefresh.

модуль маршрутизации

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

Ответ 8

Другое решение этой проблемы, особенно если вы хотите открыть/закрыть/переключить/боковую навигационную панель из других элементов управления, - это сохранить ссылку на боковую навигационную панель в сервисе, как описано ниже:

fooobar.com/info/1021308/...

это работало хорошо для меня, так как у меня было приложение, в котором боковая навигация была больше похожа на корневой элемент, а компоненты маршрутизатора были его содержимым, поэтому они были бы отключены в фоновом режиме при открытии бокового навигационного меню.