javascript - 在 Angular 2 中，如何在某些组件中隐藏侧导航栏

Question

我试图在登录组件中隐藏侧导航栏。但它并没有隐藏。我创建了侧边导航服务，

import { Injectable } from '@angular/core';

@Injectable()
export class SidenavService {

 visible: boolean;

  constructor() {this.visible = false; }
   hide() { this.visible = false; }

  show() { this.visible = true; }

  toggle() { this.visible = !this.visible; }

}

在侧边导航 html 中:

<nav class="main-menu" style="margin-top:50px;  position: fixed; background-color:#163648;">
  <ul>
    <li>
      <a routerLink="home">
        <i class="fa fa-calendar fa-2x"></i>
        <span class="nav-text">home</span>
      </a>
    </li>
    <li class="has-subnav">
      <a routerLink="user">
        <i class="fa fa-user fa-2x"></i>
        <span class="nav-text">Users</span>
      </a>
    </li>
  </ul>
</nav>

在 side.ts 中:

isIn = false;
toggleState() {
  let bool = this.isIn;
  this.isIn = bool === false ? true : false;
}
@ViewChild('childModal') childModal: SidenavComponent;
constructor(private router: Router, private viewContainerRef: ViewContainerRef, public sidenav: SidenavService) {

}

Answer 1

在 side.ts 的父级中- 你应该有一个 bool 值来控制 sidenav 的可见性。

isSideNavDisplay: boolean = true;

然后您可以将您的服务注入(inject)到这个构造函数中。

constructor(public sidenav: SidenavService){}

然后从这里您有几种方法 - Observables 、onChanges 、public statics 不建议

我将解释一种方法(和我的首选)您应该重新设计您的服务以包含 BehaviourSubject<boolean>这将向所有订阅者发布可见性状态。

这很有用，因为您可以从应用程序中的任何组件切换侧边栏的可见性

import { Injectable } from '@angular/core';
import { BehaviourSubject } from 'rxjs';

@Injectable()
export class SidenavService {


  $visible: BehaviourSubject<boolean>;

  visible: boolean;

  constructor() {
    this.visible = false; 

    $visible = new BehaviourSubject(false);


  }

  getVisibilityStream(){
    return this.$visible;
  }

  hide() { 
    this.visible = false;
    this.$visible.next(this.visible);
  }

  show() { 
    this.visible = true;
    this.$visible.next(this.visible);
  }

  toggle() { 
    this.visible = !this.visible; 
    this.$visible.next(this.visible);
  }

    }

在您的父组件(side.ts 的父组件)中，您需要在注入(inject)后立即订阅此服务。

constructor(public sidenav: SidenavService){
    sidenav.getVisibilityStream().subscribe(visible => isSideNavDisplay = visible);
}

在你的父模板中:

<sidenav *ngIf="isSideNavDisplay"></sidenav>

只需注入(inject)服务并调用任何公开公开的方法toggle() hide()或 show()