[英]Force collapse of Bootstrap 4 navbar on Angular 2 route change
I want to implement something like the following the "right" way in Angular 2:我想在 Angular 2 中以“正确”的方式实现如下所示的内容:
$('.collapse').hide();
What would be the "Angular 2 way" of doing this?这样做的“Angular 2 方式”是什么? Do I just use native JavaScript?我只使用原生 JavaScript 吗? Are there built-in Angular methods I should use?是否有我应该使用的内置 Angular 方法?
Edit : Let me add some context for my particular case.编辑:让我为我的特定情况添加一些上下文。
I have a Bootstrap 4 navbar with a collapsible nav.我有一个带有可折叠导航的 Bootstrap 4 导航栏。 If you pull down the nav, then click a link, the nav doesn't disappear like you would expect it to .如果您下拉导航,然后单击链接,导航不会像您期望的那样消失。
I want it so that when you click any link anywhere, the navbar goes back to its collapsed state.我希望这样当您在任何地方单击任何链接时,导航栏都会恢复到折叠状态。
Here's what my navbar markup looks like:这是我的导航栏标记的样子:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#foodie-navbar"
aria-controls="foodie-navbar"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" routerLink="/">Foodie</a>
<div class="collapse navbar-collapse" id="foodie-navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngIf="auth.authenticated()">
<a class="nav-link" [routerLink]="['/places']">Places</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="" (click)="auth.login()" *ngIf="!auth.authenticated()">Log In</a>
<a class="nav-link" routerLink="" (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
Here's what my AppComponent
looks like:这是我的AppComponent
样子:
import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Auth } from './auth.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Auth]
})
export class AppComponent {
constructor(private auth: Auth, private router: Router) {
router.events.subscribe(val => {
if (val instanceof NavigationEnd) {
// This is when the hiding should happen.
}
})
}
}
By the way, now that I look a little closer, I see that if I do $('.collapse').hide();
顺便说一下,现在我看得更近一点,我看到如果我这样做$('.collapse').hide();
on the console, then click the hamburger menu again, it doesn't work.在控制台上,然后再次单击汉堡菜单,它不起作用。 So maybe I need a different solution altogether.所以也许我需要一个完全不同的解决方案。
Edit : Someone marked this question a duplicate of an ng2-bootstrap question .编辑:有人将此问题标记为 ng2-bootstrap 问题的副本。 My question/answer don't have anything to do with ng2-bootstrap so I don't believe it's a duplicate.我的问题/答案与 ng2-bootstrap 没有任何关系,所以我不相信它是重复的。
I was able to achieve what I wanted by triggering a click on the navbar toggle button.我能够通过触发点击导航栏切换按钮来实现我想要的。
In both pieces of code below, probably the main thing to pay attention to is the collapseNav()
function.在下面的两段代码中,可能主要要注意的是collapseNav()
函数。
Here's my component code:这是我的组件代码:
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Auth } from './auth.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Auth]
})
export class AppComponent {
@ViewChild('navbarToggler') navbarToggler:ElementRef;
constructor(private auth: Auth) {}
navBarTogglerIsVisible() {
return this.navbarToggler.nativeElement.offsetParent !== null;
}
collapseNav() {
if (this.navBarTogglerIsVisible()) {
this.navbarToggler.nativeElement.click();
}
}
}
And here's my markup.这是我的标记。
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button #navbarToggler class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#foodie-navbar"
aria-controls="foodie-navbar"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" routerLink="/">Foodie</a>
<div class="collapse navbar-collapse" id="foodie-navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngIf="auth.authenticated()">
<a (click)="collapseNav()" class="nav-link" [routerLink]="['/places']">Places</a>
</li>
<li class="nav-item">
<a (click)="collapseNav(); auth.login()" class="nav-link" routerLink="" *ngIf="!auth.authenticated()">Log In</a>
<a (click)="collapseNav(); auth.logout()" class="nav-link" routerLink="" *ngIf="auth.authenticated()">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
Here's what I did which worked.这是我所做的工作。
Open app.component.ts打开 app.component.ts
Import Router and NavigationEnd:导入路由器和导航端:
import { Router, NavigationEnd } from '@angular/router';从“@angular/router”导入{路由器,导航结束};
Just under the imports insert the following in order to access JQuery:在导入下方插入以下内容以访问 JQuery:
declare var $: any;声明 var $: any;
Add the following into the constructor:将以下内容添加到构造函数中:
private router: Router专用路由器:路由器
In the ngOnInit() add the following:在 ngOnInit() 中添加以下内容:
this.router.events.subscribe((evt) => { if (!(evt instanceof NavigationEnd)) { return; } // Scroll to the top of the page window.scrollTo(0, 0); // This closes the top nav $(document).click((event) => { const click = $(event.target); const _open = $('.navbar-collapse').hasClass('show'); if (_open === true && !click.hasClass('navbar-toggler')) { $('.navbar-toggler').click(); } }); }); this.router.events.subscribe((evt) => { if (!(evt instanceof NavigationEnd)) { return; } // 滚动到页面顶部 window.scrollTo(0, 0); // 这会关闭顶部导航 $(document).click((event) => { const click = $(event.target); const _open = $('.navbar-collapse').hasClass('show'); if (_open == = true && !click.hasClass('navbar-toggler')) { $('.navbar-toggler').click(); } }); });
I'm using NG 10 with bootstrap 5 but I know it works in previous version of both NG and Bootstrap 4.5.x我将 NG 10 与 bootstrap 5 一起使用,但我知道它适用于 NG 和 Bootstrap 4.5.x 的先前版本
I have another Solution我有另一个解决方案
Had a bit of inspiration from this post, but also some research by myself.从这篇文章中得到了一些启发,但我自己也做了一些研究。 One of the articles I read: https://medium.com/@tiboprea/build-a-responsive-bootstrap-4-navbar-in-angular-5-without-jquery-c59ad35b007我读过的一篇文章: https : //medium.com/@tiboprea/build-a-responsive-bootstrap-4-navbar-in-angular-5-without-jquery-c59ad35b007
So, in this solution, it is possible to collapse by clicking on the toggle button but also when the route changes因此,在此解决方案中,可以通过单击切换按钮以及在路线更改时折叠
//nav.component.html //nav.component.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
Brand
</a>
<button class="navbar-toggler" type="button" (click)="toggleNavbar()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" [ngClass]="{ 'show': navbarOpen }">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</nav>
//nav.component.ts //nav.component.ts
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
export class NavComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit(): void {
this.router.events
.pipe(filter(evt => evt instanceof NavigationEnd))
.subscribe((evt: NavigationEnd) => {
this.navbarOpen = false;
});
}
toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.