web-dev-qa-db-ja.com

折りたたみがng-bootstrapで機能せず、angular 4 navbarパンくずボタンのアプリ

私はangular 4 and bootstrap= 4 beta 2とng-bootstrapをアプリケーションに使用し、ng-bootstrapも使用しています。

bootstrapドキュメントの例からnavbarを追加しました。

コードは次のようになります。

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

また、angular-cli.jsonにbootstrapスタイルを追加しました。そのコードは次のようになります。

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

モバイルビューの[パンくずリスト]ボタンは、クリックしても応答しません。そして、私が同じことを調べようとしたとき、「折りたたみ」クラスがクリック時にボタンに追加されていないことを知りました。 enter image description here

bootstrap-4collapseng-bootstraptwitter-bootstrap-4-beta
7
Adithya Sai

私は今解決策を持っています。 ng-bootstrapを使用するだけで問題が解決します。

HTMLファイル：

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

コンポーネントtsファイル：

export class AppComponent {
  isCollapsed = false;
}

bootstrap angle-cli.jsonのcssファイル：

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

これをメインモジュールに追加します。

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

imports: [
  NgbModule.forRoot()
]

これは魅力のように機能します。

Ng-bootstrapを使用する主な利点は、jqueryやpopperなどの他のjsライブラリの依存関係を排除でき、ブートストラップ用のコンポーネントを作成できることです。

15
Adithya Sai

Ng-bootstrap（または私の場合はngx-boostrap）を使用すると、jQueryとpopperを心配する必要がないため、間違いなく単純化されました。現在受け入れられている答えが述べているように。

しかし、重要な詳細を見逃したため、これは私の問題を完全には解決しませんでした。 ngx-bootstrapを起動して実行したら、navbar-collapse divのcollapseプロパティをコンポーネントファイルの変数にバインドすることから開始できます。

<div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
  ...
</div>

それだけでは十分ではなく、トグルボタンのクリックイベントにバインドして、実際にこの変数を自分で変更する必要があります（これは私が見逃した部分です）。

<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"は、私にとって基本的に欠けている部分です。これにより、ボタンのonClickイベントがisCollapsed変数にバインドされ、クリックされたときにトグルされ、navbarのcollapseプロパティが適切に設定されます。

これが私が見つけたjsfiddleであり、最終的に私の間違いを見つけるのに役立ちました： jsFiddle external link

6
Rohan

ワーキングナビゲーションバー

ng-bootstrap

はじめにコンポーネント{{コンポーネント}}

 <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>
0
Arqam Bin Rehan