quân sự sụp đổ của Bootstrap 4 navbar trên góc thay đổi 2 tuyến đường

Question

Tôi muốn thực hiện một cái gì đó như sau "quyền" cách góc 2:

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

Điều gì sẽ là "góc 2 cách" để làm điều này ? Tôi chỉ sử dụng JavaScript gốc? Có phương pháp Góc tích hợp nào tôi nên sử dụng không?

Chỉnh sửa: Hãy để tôi thêm một số ngữ cảnh cho trường hợp cụ thể của tôi.

Tôi có thanh điều hướng Bootstrap 4 với điều hướng collapsible. Nếu bạn kéo xuống điều hướng, sau đó nhấp vào liên kết, nav sẽ không biến mất như bạn mong đợi ở.

Tôi muốn nó để khi bạn nhấp vào bất kỳ liên kết nào ở bất kỳ đâu, thanh điều hướng sẽ trở về trạng thái thu gọn.

Đây là những gì đánh dấu navbar của tôi trông giống như:

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

Đây là những gì AppComponent của tôi trông giống như:

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. 
     } 
    }) 
    } 
} 

Bằng cách này, bây giờ mà tôi nhìn gần hơn một chút, tôi thấy rằng nếu tôi làm $('.collapse').hide(); trên bảng điều khiển, sau đó nhấp lại vào menu bánh hamburger, nó không hoạt động. Vì vậy, có lẽ tôi cần một giải pháp hoàn toàn khác nhau.

Chỉnh sửa: Ai đó đã đánh dấu câu hỏi này là bản sao của an ng2-bootstrap question. Câu hỏi/câu trả lời của tôi không liên quan gì đến ng2-bootstrap nên tôi không tin đó là một bản sao.

Answer 1

Tôi đã có thể đạt được những gì tôi muốn bằng cách kích hoạt nhấp chuột vào nút bật/tắt thanh điều hướng.

Trong cả hai phần mã bên dưới, có thể điều quan trọng cần chú ý là chức năng collapseNav().

Đây là mã thành phần của tôi:

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

Và đây là đánh dấu của tôi.

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