在Angular 2路线更改时强制崩溃Bootstrap 4导航栏

Question

我想在Angular 2中实现类似下面的"正确"方式:

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

这样做的"Angular 2方式"是什么？我只使用原生JavaScript吗？我应该使用内置的Angular方法吗？

编辑:让我为我的特定情况添加一些上下文.

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

我想要它,以便当您在任何地方单击任何链接时,导航栏将返回其折叠状态.

这是我的导航栏标记的样子:

<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();在控制台上,然后再次点击汉堡包菜单,它不起作用.所以也许我需要一个完全不同的解决方案.

编辑:有人将此问题标记为ng2-bootstrap问题的副本.我的问题/答案与ng2-bootstrap没有任何关系,所以我不相信它是重复的.

Answer 1

通过触发导航栏切换按钮的单击,我能够实现我想要的效果.

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

这是我的组件代码:

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>