NavbarドロップダウンがAngular 4で機能していない

Question

非常に初心者です。ちょうどAngular 4で始まりました。学習の一部として、私はいくつかの単純なコンポーネントを作成しようとしました。そこで、私はブートストラップのnavbarを持っていました。ここではここでコンストラクタ一部は

import { Component, OnInit } from '@angular/core'; 
import { BsDropdownMenuDirective } from 'ngx-bootstrap'; 
import * as $ from 'jquery'; 

@Component({ 
    selector: 'nav-menu', 
    templateUrl: './navmenu.component.html', 
    styleUrls: ['./navmenu.component.css'] 
}) 
export class NavMenuComponent implements OnInit { 
    ngOnInit(): void { 

    } 

} 

しかし、私はこのセレクタを使用私のアプリのコンポーネントのHTMLで、メニューが表示されているが、ドロップダウンが機能していないか、ナビゲーションバー

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
     <a class="navbar-brand" href="#">Test Menu</a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 

     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home </a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link</a> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
Has submenu 
        </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <div class="dropdown-divider"></div> 
         <a class="dropdown-item" href="#">Something else here</a> 
        </div> 
       </li> 

       <li class="nav-item" [routerLinkActive]="['active']"> 
        <a class="nav-link" [routerLink]="'/engagement']">Engagement</a> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" dropdownToggle> 
         System 
        </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdown" *dropdownMenu> 
         <a class="dropdown-item" [routerLink]="['/admin/users']">Manage Users</a> 
         <a class="dropdown-item" [routerLink]="['/admin/servers']">Manage Servers</a> 
         <a class="dropdown-item" [routerLink]="['/admin/logs']">View Application Logs</a> 
        </div> 
       </li> 
      </ul> 
      <form class="form-inline my-2 my-lg-0"> 
       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> 
       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
      </form> 
     </div> 
    </nav> 

のコードをですドロップダウンメニューのドロップダウン部分は表示されません。ここで

Imがメニューに

<nav-menu></nav-menu> 
<div class='container-fluid'> 
    <router-outlet></router-outlet> 
</div> 

を使用して、私のapp.component.htmlは親切に私たちは、親の上にクリックするか、マウスときに表示するドロップダウンメニューを作るために何をすべきかを提案しています。メニューサブメニューサブメニューが含まれているが、しかしそのは

Answer 1

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

を示していない。この場合にはそれがhttpsと同じだ​​