angular - 在 Angular 2 路线更改时强制折叠 Bootstrap 4 导航栏

Question

我想在 Angular 2 中以“正确”的方式实现如下内容:

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

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

编辑:让我为我的特定案例添加一些上下文。

我有一个带有 collapsible 的 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();，然后再次单击汉堡包菜单, 它不起作用。所以也许我需要一个完全不同的解决方案。

编辑:有人将此问题标记为 an ng2-bootstrap question 的副本.我的问题/答案与 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>