Góc 2 - ẩn thanh điều hướng bootstrap trên nav nhấp

Question

Trong điện thoại di động, bấm vào thanh điều hướng bootstrap không ẩn menu.

nút menu My, trong đó cho thấy đối với điện thoại di động:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 

Đang tìm kiếm các vấn đề này trả lại kết quả unreleated để góc 2 và tôi không có ý tưởng làm thế nào để thực hiện chúng.

Tôi làm cách nào để ẩn thanh điều hướng của mình khi người dùng nhấp vào liên kết?

<li><a routerLink="/page">Click this should hide nav</a></li> 

Answer 1

Bạn có thể thêm một chỉ thị tùy chỉnh nào đó cho bạn

import { Directive, ElementRef, Input, HostListener } from "@angular/core"; 

@Directive({ 
    selector: "[menuClose]" 
}) 
export class CloseMenuDirective { 
    @Input() 
    public menu: any; 

    constructor(private element: ElementRef) { } 

    @HostListener("click") 
    private onClick() { 
     this.menu.classList.remove("show"); 
    } 
} 

Đừng quên để thêm video này app.module của bạn trong mảng khai

import { CloseMenuDirective } from './directives/close-menu.directive'; 
@NgModule({ 
    declarations: [ 
     ...declarations, 
     CloseMenuDirective 
    ] 
}) 
export class AppModule { } 

Và sau đó trong HTML của bạn, bạn tạo một tham chiếu đến trình đơn của bạn và chuyển nó tới phần tử liên kết của bạn.

<div class="page-layout"> 
    <!-- Mark the menu with #menu, thus creating a reference to it --> 
    <aside class="collapse navbar-toggleable page-menu" id="navbar-header" #menu> 
     <ul class="nav"> 
      <li class="nav-item"> 
       <a class="nav-link" 
        [routerLink]="['./somewhere']" 
        routerLinkActive="active" 
        menuClose  <!-- Our custom directive above --> 
        [menu]="menu"> <!-- Bind to menu --> 
        <span>My Link</span> 
       </a> 
      </li> 
     </ul> 
    </aside> 
</div> 

Answer 2

Đây là giới hạn của thanh điều hướng (https://github.com/valor-software/ngx-bootstrap/issues/540). Vì vậy, bạn cần thao tác với phần tử DOM.

<div class="navbar-header page-scroll"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" routerLink="/"> 
     <img src="assets/images/logo.png"> 
    </a> 
</div> 
<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right" > 
     <li class="hidden"> 
      <a></a> 
     </li> 
     <li><a routerLink="/" (click)="onMenuClick()">Home</a></li> 
     <li><a routerLink="/about" (click)="onMenuClick()">About</a></li> 
    </ul> 
</div> 

Và trên .ts nộp mã số tối thiểu của bạn shoul là:

import { Component, ElementRef, Renderer } from '@angular/core'; 

export class HeaderComponent { 
    constructor(private el: ElementRef, private renderer: Renderer) { 
    } 
    onMenuClick() { 
     //this.el.nativeElement.querySelector('.navbar-ex1-collapse') get the DOM 
     //this.renderer.setElementClass('DOM-Element', 'css-class-you-want-to-add', false) if 3rd value is true 
     //it will add the css class. 'in' class is responsible for showing the menu. 
     this.renderer.setElementClass(this.el.nativeElement.querySelector('.navbar-ex1-collapse'), 'in', false);   
    } 
}