Zusammenbruch nicht in der ng-bootstrap-und Winkel-4-app für Navigation breadcrumb-Schaltfläche

Ich bin mit Winkel-4 und bootstrap-4-beta-2 und ng-bootstrap für meine Bewerbung und auch mit ng-bootstrap.

Habe ich die navbar von bootstrap-Dokumentation Beispiel.

Der code sieht so aus:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Außerdem habe ich ein bootstrap-styles in Winkel-cli.json. Code sieht wie folgt aus:

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

Die Breadcrumb-button auf die mobile Ansicht ist nicht mehr reagiert auf Ihre klicken Sie auf. und wenn ich versuchte, Sie zu inspizieren das gleiche: ich bekam zu wissen, dass "zusammengebrochen" - Klasse ist nicht immer Hinzugefügt, um die Schaltfläche klicken.

scheint, dass Sie vergaß hinzuzufügen JQuery/bootstrap.js
ich bin mit ng-bootstrap, wenn jquery ist nicht erforderlich

InformationsquelleAutor Adithya Sai | 2017-11-10

Habe ich jetzt eine Lösung. Nur mit ng-bootstrap löst Ihr Problem.

Html-Datei:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"  aria-expanded="false" aria-label="Toggle navigation" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarTogglerDemo02">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02" [ngbCollapse]="isCollapsed">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Komponente ts-Datei:

export class AppComponent {
  isCollapsed = false;
}

add bootstrap-css-Datei in Winkel-cli.json:

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

Fügen Sie diese in Haupt-Modul:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

imports: [
  NgbModule.forRoot()
]

Dies funktioniert wie ein Charme.

Der Hauptvorteil der Verwendung von ng-bootstrap ist, können Sie beseitigen die Abhängigkeiten von anderen js-Bibliotheken wie jquery, und popper, und Sie können auch schreiben Sie Ihre Komponenten für bootstrap.

Modul nicht gefunden: Error: Can ' T resolve '@ng-bootstrap/ng-bootstrap' in '/home/www/eckig/ngdemo/src/app'
Momaya hast du installiert ng-bootstrap ersten? npm install --save @ng-bootstrap/ng-bootstrap Siehe hier link
Arbeitete für mich. Dank

InformationsquelleAutor Adithya Sai

5

Mithilfe von ng-bootstrap (oder in meinem Fall ngx-boostrap) auf jeden Fall vereinfacht, da ich nicht zu befürchten, jQuery und popper. Als die derzeit akzeptierte Antwort erwähnt.

Jedoch ist dies nicht mein problem lösen geradezu als verpasste ich wichtige details. Nach ngx-bootstrap ausgeführt wird, können Sie beginnen mit der Bindung der collapse Eigenschaft des navbar-collapse div eine variable in die Komponente Datei:
```
<div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
  ...
</div>
```
Dass allein ist nicht genug, und Sie wirklich brauchen, zu ändern diese variable selbst (dies ist der Teil, den ich verpasst) durch die Bindung an das click-Ereignis von Ihrem toggler-Taste:
```
<button (click)="isCollapsed = !isCollapsed" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
```
(click)="isCollapsed = !isCollapsed" werden die grundlegenden fehlende Stück für mich. Dies bindet das onClick-Ereignis der Schaltfläche, um Ihre isCollapsed variable, wechseln Sie geklickt haben, und somit auch der Einstellung des collapse Eigenschaft der navbar entsprechend.

Hier ist das jsfiddle fand ich die schließlich hat mir geholfen, herauszufinden, meine Fehler sind:
jsFiddle externer link

danke! dies löste es für die ngx-bootstrap

InformationsquelleAutor Rohan

Arbeiten Navbar

ng-bootstrap

Erste Schritte

Komponenten

 <span class="github-buttons d-none d-lg-inline"> 
   <a class="github-button" 
      href="https://github.com/ng-bootstrap/ng-bootstrap" 
      target="_blank" 
      data-style="mega" 
      data-count-href="/ng-bootstrap/ng-bootstrap/stargazers" 
      data-count-api="/repos/ng-bootstrap/ng-bootstrap#stargazers_count" 
      data-count-aria-label="# stargazers on GitHub" 
      aria-label="Star ng-bootstrap/ng-bootstrap on GitHub">Star</a> 
   <a href="https://twitter.com/intent/tweet?button_hashtag=ngbootstrap" 
      class="twitter-hashtag-button" 
      data-size="large" 
      data-text="I&#39;m checking out ng-bootstrap, THE Angular UI framework for Bootstrap CSS" 
      data-url="https://ng-bootstrap.github.io" 
      data-show-count="true">Tweet #ngbootstrap</a> 
 </span>

InformationsquelleAutor Arqam Bin Rehan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.