web-dev-qa-db-ja.com

BootstrapドロップダウンAngular 6

Bootstrap navbar using Angular 6.でドロップダウンアイテムを作成しようとしています。6。オンラインでテストするとコードが機能します。

<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="navbar-nav">
  <li class="nav-item dropdown" >
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">Page1</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Page1.1</a>
    </div>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>

しかし、ドロップダウンはAngular 6.では機能しません。Bootstrap with Angular =：

ng add @ng-bootstrap/schematics

そして、そのドロップダウンアイテムを除いてすべてがうまくいきます！

angulardrop-down-menubootstrap-4ng-bootstrap
5
krirkrirk

以前に同じ問題に遭遇し、以下のように見つかりました：

  1. htmlは、クラスcontainerでバインドする必要がありますbootstrap Bootstrap Layout で説明したように）
  2. Bootstrap Dropdown で説明されているように、ドロップダウンはサードパーティのライブラリPopper.js上に構築されています

あなたの問題から、必要なjavascript、つまりutil.js, bootstrap.js, popper.jsまたは縮小版を参照していないことを私が知る限り、.

ここでは、何もしていません。必要なJavaScriptファイルをインデックスファイルで参照するだけです。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

そして、次のように必要に応じてナビゲーションコンポーネントとデザインを作成しました。

<div class="container">
    <!-- Content here -->
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </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>
</div

動作するデモは here にあります。これがお役に立てば幸いです。

6
Iswar

ブートストラップの同じ問題に直面しましたが、解決策を得ました。 Angular 6を使用している場合、ブートストラップ用にpopper.jsを追加する必要はありません。bootstrap 4を追加してからrxjs -compat。

npm install rxjs-compat

Ngx-bootstrapを追加して、ドロップダウンアクションを実行します。 ngx-bootstrapをインストールし、

npm install ngx-bootstrap --save

ここで、次のコードを使用して、ngx-bootstrapからアプリケーションにドロップダウンモジュールを追加する必要があります

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   CommonModule,
   BsDropdownModule.forRoot(),
   TooltipModule.forRoot(),
   ModalModule.forRoot()
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

それから私はあなたのコードにいくつかの変更を加えました、そしてそれは私にとってうまくいきます。

<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
  <li class="dropdown" dropdown >
    <a dropdownToggle role="button"> <!-- {2} -->
        Page1<span class="caret"></span></a>
    <div *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="#">Page1.1</a>
    </div>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>
6
Rushikesh Salunke

どうぞ...

以下の変更を行いました-

1。 app.component.html

<p>
  Start editing to see some magic happen :)
</p>
<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="nav navbar-nav">
  <li class="dropdown" appDropdown>
    <a href="#" class="dropdown-toggle" role="button">Page1</a>
    <ul class="dropdown-menu">
      <li><a href="#">Page1.1</a></li>
      <li><a href="#">Page1.2</a></li>
      <li><a href="#">Page1.3</a></li>
    </ul>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>

2。 app.module.ts

ドロップダウンのクリックイベントをリッスンする1つのディレクティブを追加し、app.module.tsに同じものをインポートしました

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { DropdownDirective } from './dropdown.directive';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, DropdownDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

3。 dropdown.directive.ts

クリックイベントをリッスンするディレクティブを追加

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

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

export class DropdownDirective {
  manageDropdown : boolean = false;

  constructor(private elementRef: ElementRef, private renderer: Renderer2)   {

  }

  @HostListener('click') openDropdown(eventData: Event) {
    if(!this.manageDropdown) {
      this.renderer.addClass(this.elementRef.nativeElement,'open');
      this.manageDropdown = !this.manageDropdown;
    } else {
      this.renderer.removeClass(this.elementRef.nativeElement, 'open');
      this.manageDropdown = !this.manageDropdown;
    }
  }
}

4。 angular.json

「npm install --save bootstrap @ 3」を実行し、angular.jsonファイルを以下のように変更するように要求します。

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

注-参考として、 参照 リンクにアクセスしてください。ドロップダウンのデモをご覧いただけます。

2
FrontEndOnDemand

@ Rushikesh Salunke の答えは素晴らしいですが、私がそれをすでに見たとき、ngxではなく@ ng-bootstrapライブラリを使用していたので、これが docs から見つかりました=。

最初に、NgbDropdownモジュールを、使用するコンポーネントにインポートします。

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

次に、次のように.htmlを変更します。

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

他のユースケース here を見ることができます。

1
gonzarodriguezt

あなたがすべてを正しく行い、与えられた例に従って、それがうまくいかないように見えるとき、あなたがBootstrap Module。

これは、コンポーネントを使用するメインモジュールに対して次の行で実行できます。

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

@NgModule({
  declarations: [MyComponent],
  imports: [
    NgbModule
  ],
  exports: [MyComponent]
})
0
Motasem Halawani