ブートストラップを使用した角度4のドロップダウンメニュー

Question

ブートストラップを使用して角度4で機能するドロップダウンメニューが表示されない。私はここにいくつかの異なる応答をたどったが、何も働いていない。メインのメインメニュー項目は表示されますが、ドロップは表示されません。とにかくエラーは記録されません。私は持っているコードの最新バージョンを含んでいます。どんな助けもありがとう。ここ

ここで、アプリケーション・コンポーネントのHTML

<app-header ></app-header> 
<div class="container-fluid"> 
    <div class="row" > 
     <div class="col-md-12"> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
</div> 

あるAPP-ヘッダHTMLコードです。

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a routerLink="/" class="navbar-brand">NEMO</a> 
     </div> 

     <div class="collapse navbar-collapse navbar-ex1-collapse" > 

      <ul class="nav navbar-nav"> 
       <li routerLinkActive="active"><a routerLink="/file-restore" *ngIf="! newHireService.isNewHireMode">File Restore</a></li> 

       <li class="menu-item dropdown" > 
        <a style="cursor: pointer;" class="dropdown-toggle" data-toggle="dropdown" >Reports<span class="caret" ></span></a> 
        <ul class="dropdown-menu"> 
         <li class="menu-item dropdown dropdown-submenu"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a> 
          <ul class="dropdown-menu"> 
           <li class="menu-item "> 
            <a href="#">Link 1</a> 
           </li> 
           <li class="menu-item dropdown dropdown-submenu"> 
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a> 
            <ul class="dropdown-menu"> 
             <li> 
              <a href="#">Link 3</a> 
             </li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 

     </div> 
    </div> 
</nav> 

私.angular-cli.jsonファイルには、次のようにあります。

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "name": "nemo-ui" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
     "../node_modules/font-awesome/css/font-awesome.css", 
      "../node_modules/jquery/dist/jquery.min.js", 
     "styles.css" 
     ], 
     "scripts": [], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "lint": [ 
    { 
     "project": "src/tsconfig.app.json" 
    }, 
    { 
     "project": "src/tsconfig.spec.json" 
    }, 
    { 
     "project": "e2e/tsconfig.e2e.json" 
    } 
    ], 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "component": {} 
    } 
} 

Answer 1

問題はあなたの角度-CLIのコードです。 CSSブロックにjquery.min.jsを配置し、ブートストラップスクリプトもロードしていませんでした。これは、問題を解決し

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