在Angular 2路线更改上强制Bootstrap 4导航栏崩溃 [英] Force collapse of Bootstrap 4 navbar on Angular 2 route change

问题描述

我想在Angular 2中实现类似正确"的方法，

I want to implement something like the following the "right" way in Angular 2:

$('.collapse').hide();

这样做的角度2方式"是什么?我是否只使用本机JavaScript?我应该使用内置的Angular方法吗?

What would be the "Angular 2 way" of doing this? Do I just use native JavaScript? Are there built-in Angular methods I should use?

编辑:让我为我的特殊情况添加一些背景信息.

Edit: Let me add some context for my particular case.

我有一个带有可折叠导航的Bootstrap 4导航栏.如果您下拉导航栏，然后单击链接，导航栏不会像您期望的那样消失.

I have a Bootstrap 4 navbar with a collapsible nav. 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.

这是我的导航栏标记:

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

这是我的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.
      }
    })
  }
}

顺便说一句，现在我看起来更近了，我发现如果我在控制台上执行$('.collapse').hide();，然后再次单击汉堡包"菜单，则该菜单不起作用.所以也许我需要一个完全不同的解决方案.

By the way, now that I look a little closer, I see that if I do $('.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. My question/answer don't have anything to do with ng2-bootstrap so I don't believe it's a duplicate.

推荐答案

通过导航栏切换按钮的单击，我能够实现我想要的目标.

I was able to achieve what I wanted by triggering a click on the navbar toggle button.

在下面的两段代码中，可能主要要注意的是collapseNav()函数.

In both pieces of code below, probably the main thing to pay attention to is the collapseNav() function.

这是我的组件代码:

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();
    }
  }
}

这是我的标记.

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

这篇关于在Angular 2路线更改上强制Bootstrap 4导航栏崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！