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

标签 javascript html css angular

我正在尝试在登录组件中隐藏侧导航栏。但它没有隐藏。
我创建了侧导航服务,

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) {

}

最佳答案

side.ts 的父级中- 你应该有一个 bool 值来控制 sidenav 的可见性。
isSideNavDisplay: boolean = true;
然后你可以将您的服务注入(inject)此构造函数 .

constructor(public sidenav: SidenavService){}

然后从这里你有几种方法 - 观察 , 更改 , 公共(public)静态 不建议

我将解释一种方法( 和我的首选)
您应该重新设计您的服务以包含 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()

关于javascript - 在 Angular 2 中,如何在某些组件中隐藏侧导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44329699/

相关文章:

html - 一个神秘的黑色竖线问题(html,domino xpage)

html - 单击菜单后如何添加css类并突出显示当前菜单

javascript - 如何区分手持式扫描仪/枪式扫描仪的输入以及 jQuery 中的键盘输入?

javascript - 电子邮件返回数字值而不是名称

javascript - Asp.net使用jQuery启用/禁用checkboxList

javascript - 使用JavaScript从表单添加到多个选择列表

html - 纯CSS画圈动画

javascript - 在鼠标悬停时显示动态创建的 div 并删除

html - 为什么尽管使用了防弹的@ face-font语法,但我仍无法设置字体?

jquery - 导航条词缀对导航条没有影响