angular 2 - 如何在某些组件中隐藏导航栏

Question

我在 nav.component.html 中单独创建了导航栏，如何在某些组件（如 login.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>

原文由 User 123 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

整个应用程序通常需要导航栏控件和格式，因此 NavbarService 很有用。在需要的地方注入那些组件。

导航栏.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() { }

  ...
}

导航栏.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 ) {}
}

导航栏.component.html：

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

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

原文由 Dan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

通过向 route.module 中的路线添加数据对象，我能够在不使用导航/工具栏服务的情况下解决这个问题。我扩展了 Todd Motto 向页面添加动态标题的示例， 并将 toolbar: false/true 添加到我路径中的数据对象。然后我订阅了我的 toolbar.component 中的路由器事件。使用 Todd 的事件侦听器函数，我读取了路径对象并使用布尔值将工具栏设置为可见或不可见。

无需服务，可在页面刷新时使用。

路由模块

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

工具栏组件

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

工具栏.html

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

原文由 cbilliau 发布，翻译遵循 CC BY-SA 4.0 许可协议