角度2 - 如何隐藏某些组件中的导航栏 [英] angular 2 - how to hide nav bar in some components

问题描述

我在nav.component.html中分别创建了导航栏，如何在login.component等组件中隐藏导航栏。

> nav.component.html

 < nav class =navbar navbar-default navbar-固定顶部navClass> 
< div class =container-fluid> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggle collapsed
（click）=toggleState（）> 
< span class =sr-only>切换导航< / 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}> 
在此输入代码< ul class =nav navbar-nav> 
< li class =active>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>关于< / a>< / li> 
 
< / ul> 
 
< / div> 
< / div> 
< / nav> 
  

解决方案

Navbar控件和格式化通常在整个应用程序中都需要，所以NavbarService很有用。在需要的地方注入这些组件。

navbar.service.ts：

  import {Injectable} from '@角/芯'; 
 
 @Injectable（）
导出类NavbarService {
 visible：boolean; 
 
构造函数（）{this.visible = false; } 
 
 hide（）{this.visible = false; } 
 
 show（）{this.visible = true; } 
 
 toggle（）{this.visible =！this.visible; } 
 
 doSomethingElseUseful（）{} 
 $ b $ ... 
} 
  

navbar.component.ts：
$ b

 从'@ angular / core'导入{Component} ; 
从'./navbar.service'导入{NavbarService}; 
 
 @Component（{
 moduleId：module.id，
 selector：'sd-navbar'，
 templateUrl：'navbar.component.html'
}）
 
导出类NavbarComponent {
 
构造函数（public nav：NavbarService）{} 
} 
  pre> 
 
 
 navbar.component.html：
 < nav * ngIf = nav.visible > 
 ... 
< / nav> 
  
 example.component.ts：
 从'@ angular / core'导入{Component，OnInit}; 
从'./navbar.service'导入{NavbarService}; 
 
 @Component（{
}）
导出类ExampleComponent实现OnInit {
 
构造函数（public nav：NavbarService）{} 
} 
 ngOnInit（）{
 this.nav.show（）; 
 this.nav.doSomethingElseUseful（）; 
} 
  
 
I am created nav bar separately in nav.component.html ,how to hide nav bar in some components like login.component.

  
nav.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>

解决方案
Navbar control and formatting is often needed throughout an app, so a NavbarService is useful. Inject in those components where you need.  

navbar.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() { }

  ...
}
navbar.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 ) {}
}
navbar.component.html:
<nav *ngIf="nav.visible">
 ...
</nav>
example.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();
}


                        
这篇关于角度2  - 如何隐藏某些组件中的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！