webentwicklung-frage-antwort-db.com.de

Gibt es eine Möglichkeit, die mobile Navigationsleiste in ng2-bootstrap zu erstellen?

Ich habe ng2-bootstrap und Angular2 implementiert.

Ich kann nicht herausfinden, wie man die mobile Navigationsleiste öffnen/schließen lässt.

Ist das etwas, das gerade noch nicht unterstützt wird? Oder fehlt mir etwas?

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

Typoskript:

/*
 * 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
 */
21
drizzie

Sie müssen die collapse-Direktive einschließen und verwenden

Zuerst importieren Sie die Direktive
import { CollapseDirective } from 'ng2-bootstrap'

Nehmen Sie es in Ihre Komponentenrichtlinien auf
@Component({ directives: [CollapseDirective] })

Bearbeiten: Wie von Akkusativobjekt in den Kommentaren erwähnt, werden Direktiven (in der aktuellen stabilen Version von angular 2) nicht mehr im @Component-Attribut platziert.
Sie sind im NgModule-Attribut enthalten.

@NgModule({ declarations: [CollapseDirective] })

erstellen Sie dann in Ihrem Controller eine Variable, um zu verfolgen, ob sie komprimiert ist oder nicht
export class MyController { public isCollapsed: boolean = true; }

und in Ihrer Vorlage die Zeile, die so aussieht
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" >
Sie möchten die Variable umschalten
<button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed" >

Und auch in Ihrer Vorlage möchten Sie die Zeile ändern, die besagt
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> Um die Direktive aufzunehmen
<div id="navbar" class="navbar-collapse collapse" [collapse]="isCollapsed">

Dokumentation zum Zusammenbruch von ng2-bootstrap
Beispiel für die Verwendung der Collapse-Direktive in HTML
Dokumentation für NgModule

51
Seth

Ich konnte dies mit Hilfe von straight bootstrap4/jquery in meinem angle2-Projekt tun, indem ich die gleichen Datenumschalt- und Datenzielattribute zum collapsible target div hinzufügte:

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

Ich hoffe, dass dies jemandem helfen kann, während ich damit zu kämpfen habe. Vielen Dank an alle oben, die mich auf die richtige Spur gebracht haben.

2
bigMC28

Während Seths Lösung absolut gut funktioniert, modifizierte ich die Kollapslogik. Anstelle des Klickereignisses abonniere ich die Routerereignisse, um das Menü erst nach erfolgreicher Navigation auszublenden.

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

Dies ist eine Einschränkung der Navigationsleiste ( https://github.com/valor-software/ngx-bootstrap/issues/540 ). Sie müssen also das DOM-Element bearbeiten.

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

Und auf .ts Datei muss Ihr minimaler Code sein:

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