Bootstrap 4 導航欄在 Angular 2 路線更改時強制崩潰

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>

Answer 2

這是我所做的工作。

1. 打開 app.component.ts

2. 導入路由器和導航端：

   從“@angular/router”導入{路由器，導航結束}；

3. 在導入下方插入以下內容以訪問 JQuery：

   聲明 var $: any;

4. 將以下內容添加到構造函數中：

   專用路由器：路由器

5. 在 ngOnInit() 中添加以下內容：

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

我將 NG 10 與 bootstrap 5 一起使用，但我知道它適用於 NG 和 Bootstrap 4.5.x 的先前版本

Answer 3

我有另一個解決方案

從這篇文章中得到了一些啟發，但我自己也做了一些研究。 我讀過的一篇文章： https : //medium.com/@tiboprea/build-a-responsive-bootstrap-4-navbar-in-angular-5-without-jquery-c59ad35b007

因此，在此解決方案中，可以通過單擊切換按鈕以及在路線更改時折疊

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

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