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的父级中 - 你应该有一个控制sidenav可见性的布尔值。

isSideNavDisplay: boolean = true;

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

constructor(public sidenav: SidenavService){}

然后从这里你有几种方法 - Observables ， onChanges ，公共静态 不建议

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

在角度2中，如何隐藏某些组件中的侧导航栏

2 个答案:

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