Html angular 2 - 如何在某些组件中隐藏导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43118592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular 2 - how to hide nav bar in some components
提问by User 123
I am created nav bar separately in nav.component.html ,how to hide nav bar in some components like login.component.
我在 nav.component.html 中单独创建了导航栏，如何在一些组件（如 login.component）中隐藏导航栏。
nav.component.html
导航组件.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>
回答by Dan
Navbar control and formatting is often needed throughout an app, so a NavbarService is useful. Inject in those components where you need.
整个应用程序中经常需要导航栏控件和格式设置，因此 NavbarService 很有用。在您需要的地方注入那些组件。
navbar.service.ts:
导航栏.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:
导航栏.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:
导航栏.component.html：
<nav *ngIf="nav.visible">
...
</nav>
example.component.ts:
示例.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();
}
回答by cbilliau
I was able to solve this without using a nav/toolbar service by adding a data object to the route in the route.module. I expanded on Todd Motto's example of adding dynamic titles to a pageand added toolbar: false/trueto the data object in my path. I then subscribed to the router events in my toolbar.component. Using Todd's event listener func, I read the path object and used the boolean value to set the toolbar visible or not visible.
通过向 route.module 中的路由添加数据对象，我能够在不使用导航/工具栏服务的情况下解决此问题。我扩展了Todd Motto 将动态标题添加toolbar: false/true到页面并添加到我路径中的数据对象的示例。然后我在我的 toolbar.component 中订阅了路由器事件。使用 Todd 的事件侦听器 func，我读取路径对象并使用布尔值来设置工具栏可见或不可见。
No service needed and works on pagerefresh.
无需服务，可在 pagerefresh 上工作。
routing module
路由模块
...
const routes: Routes = [
{ path: 'welcome', component: WelcomeComponent, data: { title: 'welcome', toolbar: false} }, ...];
toolbar.component
工具栏组件
constructor(private router: Router, private activatedRoute: ActivatedRoute, public incallSvc: IncallService) {
this.visible = false; // set toolbar visible to false
}
ngOnInit() {
this.router.events
.pipe(
filter(event => event instanceof NavigationEnd),
map(() => this.activatedRoute),
map(route => {
while (route.firstChild) {
route = route.firstChild;
}
return route;
}),
)
.pipe(
filter(route => route.outlet === 'primary'),
mergeMap(route => route.data),
)
.subscribe(event => {
this.viewedPage = event.title; // title of page
this.showToolbar(event.toolbar); // show the toolbar?
});
}
showToolbar(event) {
if (event === false) {
this.visible = false;
} else if (event === true) {
this.visible = true;
} else {
this.visible = this.visible;
}
}
toolbar.html
工具栏.html
<mat-toolbar color="primary" *ngIf="visible">
<mat-toolbar-row>
<span>{{viewedPage | titlecase}}</span>
</mat-toolbar-row>
</mat-toolbar>
回答by Shanika Ediriweera
Adding to Dan's answer.
添加到Dan的答案。
One more detail required for a complete answer. Which is registering the NavbarServiceas a provider for the whole application from app.module.ts
完整答案还需要一个细节。这是注册NavbarService为整个应用程序的提供者app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
import { NavbarModule } from './navbar/navbar.module';
import { NavbarService } from './navbar/navbar.service';
import { AppRoutingModule, routedComponents } from './routing.module';
@NgModule({
imports: [
BrowserModule, FormsModule, HttpModule,
NavbarModule,
SharedModule,
AppRoutingModule
],
declarations: [
routedComponents,
],
providers: [
// Here we register the NavbarService
NavbarService
],
bootstrap: [AppComponent]
})
export class AppModule { }
回答by trees_are_great
I like this answerby Dan above. However, it does create some update console errors, which I do not want in a production app. I would suggest instead using this method: answer.
我喜欢上面丹的这个答案。但是，它确实会创建一些更新控制台错误，这是我不希望在生产应用程序中出现的。我建议改用这种方法：answer。
It might also be helpful to use a canDeactivate to complete the implementation. Where I was hiding the navbar, such as on login, I added a navigate away 'canDeactive' service:
使用 canDeactivate 来完成实现也可能会有所帮助。我隐藏导航栏的地方，例如在登录时，我添加了一个导航“canDeactive”服务：
{ path: 'login', component: LoginComponent, canDeactivate: [NavigateAwayFromLoginDeactivatorService] },
The deactivate service looks like this:
停用服务如下所示：
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { LoginComponent } from "app/user/login/login.component";
import { NavbarTopService } from "app/navbar-top/navbar-top.service";
@Injectable()
export class NavigateAwayFromLoginDeactivatorService implements CanDeactivate<LoginComponent> {
constructor(public nav: NavbarTopService) { }
canDeactivate(target: LoginComponent) {
this.nav.show();
return true;
}
}
This way, I can hide only on login and do not need to call show()on every other component.
这样，我只能在登录时隐藏，不需要调用show()其他所有组件。
回答by JaganY
Another solution to this problem, specially if you are looking to open/close/toggle/ the side nav bar from other controls is to hold a reference to the side nav bar in a service as discussed below:
此问题的另一个解决方案，特别是如果您希望从其他控件打开/关闭/切换/侧导航栏，则是在服务中保存对侧导航栏的引用，如下所述：
https://stackoverflow.com/a/48076331/1013544
https://stackoverflow.com/a/48076331/1013544
this worked well for me as I had an application where the side nav was more like the root element and the router components were its content so they would be disabled in the background when the side nav menu is opened.
这对我来说效果很好，因为我有一个应用程序，其中侧面导航更像是根元素，而路由器组件是它的内容，因此当打开侧面导航菜单时，它们将在后台禁用。
回答by happyZZR1400
You can use ngIF directive on components where nav is located
您可以在导航所在的组件上使用 ngIF 指令
<nav *ngIf="this.currentRoute!=='login'" navigation>
</nav>
after you get the current route:
获得当前路线后：
this.router.events.subscribe(event => {
if (event.constructor.name === "NavigationEnd") {
this.name = (<any>event).url.split("/").slice(-1)[0];
this.isLogin = this.currentRoute === 'login';
}
})
回答by Vivek Doshi
Add *ngIf='!showNav' in template
在模板中添加 *ngIf='!showNav'
<nav class="navbar navbar-default navbar-fixed-top navClass" *ngIf='!showNav' >
And in LoginComponent
在 LoginComponent 中
showNav = true;
This will show nav rest of the all the pages , if you want to hide in any pages just put showNav = true;in that component.
这将显示所有页面的导航其余部分，如果您想隐藏showNav = true;在该组件中的任何页面中。
How it works :
这个怎么运作 ：
First for it will check for showNavvariable but it will not be available , so it will return false for the other pages where we want to show menu , so need to declare that variable any other pages.
首先它会检查showNav变量但它不可用，所以它会为我们想要显示菜单的其他页面返回 false，因此需要在任何其他页面声明该变量。
In login page we set the value to true, so it will make it false and hide the nav.
在登录页面中，我们将值设置为 true，因此它将使其为 false 并隐藏导航。
回答by Kenni
In order for it to work also add "Providers" wherever you're importing the NavbarService
为了使其正常工作，还可以在您导入 NavbarService 的任何地方添加“Providers”
navbar.component.ts and also example.component.ts
navbar.component.ts 和 example.component.ts
@Component({
moduleId: module.id,
selector: 'sd-navbar',
templateUrl: 'navbar.component.html',
providers: [NavbarService ]
})
回答by Jonathan
The linked answer aboveby JaganY is the best answer if you are hiding a mat-sidenav element. You should never have simple code like this require change detection. Here is an example for other types of elements:
如果您要隐藏 mat-sidenav 元素，那么 JaganY上面的链接答案是最佳答案。您永远不应该让像这样的简单代码需要更改检测。以下是其他类型元素的示例：
app.componenent.html
app.component.html
<nav #rNav>
<app-rightnav></app-rightnav>
</nav>
app.componenent.ts
app.component.ts
@ViewChild('rNav') rNav!: ElementRef;
constructor(public nav: NavbarService) { }
ngAfterViewInit(): void {
this.nav.setRight(this.rNav);
}
navbar.service.ts
导航栏.service.ts
import { Injectable, ElementRef } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class NavbarService {
private right!: ElementRef;
private visible!: boolean;
hideR() {
this.visible = false;
this.right.nativeElement.style.display = 'none';
}
showR() {
this.visible = true;
this.right.nativeElement.style.display = 'block';
}
toggleR() { this.visible ? this.hideR() : this.showR(); }
setRight(e: ElementRef) {
this.right = e;
}
}
child-components.html
子组件.html
constructor() {
this.nav.hideR(); // or this.nav.showR();
}
