web-dev-qa-db-ja.com

Angular 2アプリケーションでBootstrapドロップダウンを使用する方法は？

私の現在のプロジェクトでは、ドロップダウンを追加したいので、この link からコードを取得しました。以下のコードを追加すると、例のようにドロップダウンが表示されますが、クリックしても何も起こりません。

   <li class="dropdown">
                <a [routerLink]="['/frontendai']" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Application Insights <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a [routerLink]="['/frontendai']">FrontEnd AI</a></li>
                    <li class="divider"></li>
                    <li><a [routerLink]="['/apiai']">API AI</a></li>
                    <li class="divider"></li>
                    <li><a [routerLink]="['/apiai']">SQL Exception</a></li>
                </ul>
            </li>

Bootstrap version 3.3.7を使用し、以下の行をmyindex.cshtmlに追加しました）

<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

BootstrapドロップダウンをAngular 2プロジェクトで使用するにはどうすればよいですか？

angulartypescriptdropdownbootstrapping
6
Pradeep

ngx-bootstrapはAngular Project。（バージョン2以上）で利用できます。

ここにリンクがあります： http://valor-software.com/ngx-bootstrap/#/dropdowns

プロジェクトで使用できます。

指示

do npm install ngx-bootstrap --save

インポートドロップダウンモジュール

// RECOMMENDED (doesn't work with system.js)
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
// or
import { BsDropdownModule } from 'ngx-bootstrap';

@NgModule({
  imports: [BsDropdownModule.forRoot(),...]
})
export class AppModule(){}

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</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="#">Separated link</a>
    </li>
  </ul>
</div>
8
blackiii

bootstrap dropdown in angularを使用するには、2つのクラスを追加する必要があります-1つshow親ドロップダウン要素のクラス、つまりドロップダウンとその他- 表示子ドロップダウンメニューのクラス。

そのためには、ドロップダウンコンポーネントを作成し、値のリストを配列としてクリックハンドラーに渡すか、カスタムディレクティブを作成します。

カスタムドロップダウンディレクティブアプローチ：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {

  constructor(private el: ElementRef) { }

  //Binding click to Add show class 
  @HostListener('click') onclick() {

    var parent = this.el.nativeElement;//parent element
    parent.classList.toggle('show');
    var child = [].filter.call(this.el.nativeElement.children, function(ele) {
      return ele.classList.contains('dropdown-menu');
    }); //Identify the child element on dropdown clicked- dropdwon menu

    if(child.length) {
      child[0].classList.toggle('show');
    }
  }

}

テンプレートでこれをbootstrapドロップダウンに添付します：

<li class="nav-item dropdown" appDropdown>
   <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Username
   </a>
   <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" >Profile 2</a>
      <a class="dropdown-item" >Logout 2</a>
   </div>
 </li>

[〜＃〜] note [〜＃〜]-このソリューションはBootstrap 4ドロップダウンのみです。Boostrap3の場合、必要なクラスを特定する必要がありますこれは、親レベルのopenクラスでなければなりません。

3
Vishal