web-dev-qa-db-ja.com

ナビゲーションバーのドロップダウンメニューがAngularおよびBootstrap 4

Angular 5およびBootstrap 4でWebアプリケーションを開発していますが、ナビゲーションメニューバーのドロップダウンに問題があります。ドキュメントに従っています。 https://getbootstrap.com/docs/4.0/components/navs/ しかし、ドロップダウンメニューが機能しない理由はわかりません！

<header>
    <div class = "row align-items-end nopadding">
        <div class = "col-md-3" style = "background-color: blanchedalmond"><app-logo></app-logo></div>
        <div class = "col-md-6">
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Ligas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Gráficas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Artículos</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>      
                    <div class=" dropdown dropdown-menu">
                        <a class="dropdown-item menu-item" href="#">Equipos</a>
                        <a class="dropdown-item menu-item" href="#">Jugadoras</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>                
            </ul>
        </div>
        <div class = "col-md-3 right-content">
            Right column
        </div>
    </div>
</header>

私は何を間違えていますか？

編集I：

Npmを介してjqueryとpopperを追加し、muy angular-cli.jsonを更新してサーバーを再起動しました。

angular-cli.json：

enter image description here

そして、ページをロードすると、このエラーが発生します：

Error in the source mapping: request failed with status 404 
Resource URL: http://localhost:4200/ scripts.bundle.js 
Sourcemap URL: bootstrap.min.js.map

Jqueryをインストールすると、次の出力が得られます。

enter image description here

そして、私がポッパーをインストールしたとき、私はこの出力を得ました：

enter image description here

私は何を間違えていますか？

htmlcssangularbootstrap-4
9
José Carlos

Angularでポップアップまたはドロップダウンするすべてのものに必要なため、popper.jsがBootstrapアプリに含まれて読み込まれることを確認する必要があります。

angular-cli.jsonの関連部分は次のようになります。

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Popper.jsをインストールするには、次のコマンドを使用します。

npm install popper.js --save

リファレンス： https://www.npmjs.com/package/popper.js

21
WebDevBooster

_app.module.ts_に加えて、navbarコードを配置するモジュールにMDBBootstrapModule.forRoot()モジュールをインポートする必要があります。

例：_../custom.module.ts_

_import { MDBBootstrapModule } from 'angular-bootstrap-md';
...
@NgModule({
  imports: [
    CommonModule,
    MDBBootstrapModule.forRoot()
  ],
...
_
1
Alejandro E

スクリプトにポッパー、jquery依存関係を追加する代わりに、ng-bootstrapをインストールできる代わりにこれを試してください（ https://ng-bootstrap.github.io でドキュメントを探してください）。ブートストラップ、jquery、およびpopperのスクリプトを追加するよりもng-bootstrapを使用する利点は、バンドルサイズが膨らまないことであり、これらの理由によりangularコミュニティがng-bootstrapを作成しました。インストール手順：

  1. npm install --save @ng-bootstrap/ng-bootstrap
  2. インストールしたら、メインモジュールをインポートする必要があります。
0
bharath pn