कोणीय 2 - एनएवी पर बूटस्ट्रैप नेविबार को छिपाएं

Question

मोबाइल में, बूटस्ट्रैप नेविबार आइटम पर क्लिक करने से मेनू छुपा नहीं जाता है।

मेरे मेनू बटन है, जो मोबाइल फोन के लिए पता चलता है:

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

इस समस्या के लिए सर्च कर रहे हैं लौटे कोणीय से 2 unreleated परिणाम और मैं पता नहीं कैसे उन्हें लागू करने की है।

जब उपयोगकर्ता एक लिंक पर क्लिक करता है तो मैं अपने navbar को कैसे छुपा सकता हूं?

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

Answer 1

आपको लगता है कि इसके लिए करता है एक कस्टम निर्देश जोड़ सकता है आप

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

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

और फिर घोषणाओं सरणी में अपने app.module में जोड़ने के लिए मत भूलना अपने एचटीएमएल में आप अपने मेनू का संदर्भ बनाते हैं और अपने लिंक तत्व को पास करते हैं।

<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

यह नेवबार (https://github.com/valor-software/ngx-bootstrap/issues/540) की एक सीमा है। तो आपको डीओएम तत्व में हेरफेर करने की जरूरत है।

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

और .ts पर फाइल अपने न्यूनतम कोड होना shoul:

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