在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的父side.ts -您应该有一个布尔值，用于控制sidenav的可见性。

isSideNavDisplay: boolean = true;

然后，您可以将服务注入此构造函数 。

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的父）中，您将需要在注入该服务后立即对其进行订阅。

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

在您的父模板中：

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

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

Answer 2

我会以不同的方式适当地解决它，因为隐藏dom元素可以通过两种方式完成：

<div [hidden]="!visible">This is the side menu</div>

或者更好的方法，因为您不需要加载显然不需要的内容。

<div *ngIf="!visible">This is another way of hiding</div>

可以通过非常简单的服务在两个状态之间进行切换：

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

export class SidenavService {

    @Input() visible: boolean; 

}

*如果您希望其他服务与之交互，则还需要添加Injectable。

然后从父组件中，可以简单地设置布尔值：

import {SidenavService} from '??';
...

constructor(private showMenu: SidenavService) { }
show() { this.showMenu.visible = true; }
toggle() { this.showMenu.visible = !this.showMenu.visible; }}