ngbtooltip ngbdatepicker formularios componentes bootstrap angular ng2-bootstrap

angular - ngbdatepicker - ¿Hay alguna manera de construir la barra de navegación móvil en ng2-bootsrap?



ng-bootstrap (4)

Esta es una limitación de la barra de navegación ( https://github.com/valor-software/ngx-bootstrap/issues/540 ). Entonces necesitas manipular el elemento 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>

Y en el archivo .ts su código mínimo debería ser:

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, remove it. this.renderer.setElementClass(this.el.nativeElement.querySelector(''.navbar-ex1-collapse''), ''in'', false); } }

He estado implementando ng2-bootstrap y Angular2.

No puedo entender cómo hacer que la barra de navegación móvil se abra o se cierre.

¿Esto es algo que aún no es compatible? ¿O me estoy perdiendo algo?

Actualización, html:

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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" href="#"> <img src="/logo.png" /> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li router-active> <a [routerLink]=" [''Index''] ">Summary<span class="sr-only">(current)</span></a> </li> <li router-active> <a [routerLink]=" [''Portfolio''] ">Portfolio<span class="sr-only">(current)</span></a> </li> <li router-active> <a [routerLink]=" [''About''] ">About<span class="sr-only">(current)</span></a> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li dropdown keyboardNav="true"> <a href class="dropdown-toggle" role="button" aria-expanded="false" dropdownToggle> <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Andrew Duncan <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li role="menuitem"><a class="dropdown-item" href="#">Account Settings</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li> <li class="divider dropdown-divider"></li> <li role="menuitem"><a class="dropdown-item" href="#">Logout</a></li> </ul> </li> </ul> </div> </div>

Mecanografiado:

/* * Angular 2 decorators and services */ import { Component, ViewEncapsulation } from ''@angular/core''; import { RouteConfig, Router } from ''@angular/router-deprecated''; import { AppState } from ''./app.service''; import { Home } from ''./home''; import { RouterActive } from ''./router-active''; import { BUTTON_DIRECTIVES, DROPDOWN_DIRECTIVES } from ''../../node_modules/ng2-bootstrap''; /* * App Component * Top Level Component */ @Component({ selector: ''app'', pipes: [ ], providers: [ ], directives: [ RouterActive, BUTTON_DIRECTIVES, DROPDOWN_DIRECTIVES ], encapsulation: ViewEncapsulation.None, styles: [ require(''./app.css'') ], template: require(''./app.html'') }) @RouteConfig([ { path: ''/'', name: ''Index'', component: Home, useAsDefault: true }, { path: ''/home'', name: ''Home'', component: Home }, // Async load a component using Webpack''s require with es6-promise-loader and webpack `require` { path: ''/about'', name: ''About'', loader: () => require(''es6-promise!./about'')(''About'') }, { path: ''/portfolio'', name: ''Portfolio'', loader: () => require(''es6-promise!./portfolio'')(''Portfolio'') } ]) export class App { angularclassLogo = ''assets/img/angularclass-avatar.png''; loading = false; url = ''https://twitter.com/AngularClass''; constructor( public appState: AppState) { } ngOnInit() { console.log(''Initial App State'', this.appState.state); } } /* * Please review the https://github.com/AngularClass/angular2-examples/ repo for * more angular app examples that you may copy/paste * (The examples may not be updated as quickly. Please open an issue on github for us to update it) * For help or questions please contact us at @AngularClass on twitter * or our chat on Slack at https://AngularClass.com/slack-join */


Necesita incluir y usar la directiva de colapso

primero importa la directiva
import { CollapseDirective } from ''ng2-bootstrap''

Inclúyalo en sus directivas de componentes
@Component({ directives: [CollapseDirective] })

Editar: Como señala Akkusativobjekt en los comentarios, las directivas (en la versión estable actual de angular 2) ya no se colocan en el atributo @Component.
Están incluidos en el atributo NgModule.

@NgModule({ declarations: [CollapseDirective] })

luego en tu controlador crea una variable para mantener un registro de si está colapsado o no
export class MyController { public isCollapsed: boolean = true; }

y en su plantilla, la línea que se parece a esto
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" >
querrás alternar la variable
<button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed" >

Y también en su plantilla, querrá cambiar la línea que dice
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> para incluir la directiva
<div id="navbar" class="navbar-collapse collapse" [collapse]="isCollapsed">

Documentación para el colapso ng2-bootstrap
Ejemplo de uso de la directiva de colapso en html
Documentación para NgModule


Pude hacer esto usando bootstrap4 / jquery directo dentro de mi proyecto angular2 agregando los mismos atributos de alternancia de datos y destino de datos al div objetivo colapsable:

<nav class="navbar navbar navbar-dark bg-inverse navbar-sticky-top clearfix"> <div class="clearfix"> <a class="navbar-brand" href="#">MCR</a> <button class="navbar-toggler hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> </button> </div> <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2" data-toggle="collapse" data-target="#exCollapsingNavbar2"> <ul class="nav navbar-nav"> <li class="nav-item"> <a routerLink="/home" routerLinkActive="active" class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a routerLink="/collection" routerLinkActive="active" class="nav-link" href="#">Collection</a> </li> </ul> </div>

Espero que esto pueda ayudar a alguien mientras luché con esto. Gracias a todos por ponerme en el camino correcto.


Si bien la solución de Seth funciona absolutamente bien, modifiqué la lógica de colapso. En lugar de utilizar el evento click, me suscribo a los eventos del enrutador para colapsar el menú solo después de una navegación exitosa.

export class NavMenuComponent implements OnDestroy { public isCollapsed: boolean = true; private subscription: Subscription; constructor(private router: Router) { this.subscription = this.router.events.subscribe(s => { if (s instanceof NavigationEnd) { this.isCollapsed = true; } }); } ngOnDestroy() { this.subscription.unsubscribe(); } }