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>

Answer 2

这就是我所做的，它奏效了。

打开 app.component.ts
导入路由器和导航结束：

从“@angular/router”导入 { Router, NavigationEnd };
在导入下方插入以下内容以访问 JQuery：

声明 var $: any;
将以下内容添加到构造函数中：

私有路由器：路由器
在 ngOnInit() 中添加以下内容：

this.router.events.subscribe((evt) => { if (!(evt instanceof NavigationEnd)) { 返回; } // 滚动到页面顶部 window.scrollTo(0, 0); // 这将关闭顶部导航 $(document).click((事件) => { 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;
  }
 }

Angular 2路线更改

3 个答案: