无法在角度4中打开下拉菜单？

Question

我是angular.please的初学者

我正在尝试使用引导程序尝试使用angular 4。

当我在普通HTML中添加相同内容并且可以打开下拉菜单时。我在角度上也是一样，我做不到同样的事情

我知道我可以使用NGBoostarp做到这一点，但我想使用普通的boostarp来实现。

我可以检查dom元素是否添加了开放类吗？但是仍然无法正常工作。

   Receipe.html



    <div class="dropdown" appDropDowndirective>
        <button class="btn btn-primary dropdown-toggle " type="button" data- 
          toggle="dropdown" aria-expanded="false">Dropdown Example
            <span class="caret"></span></button>
              <ul class="dropdown-menu">
             <li><a href="#">HTML</a></li>
             <li><a href="#">CSS</a></li>
             <li><a href="#">JavaScript</a></li>
             </ul>
             </div>

            directive code 
            import { Directive, HostListener, HostBinding } from '@angular/core';

               @Directive({
                      selector: '[appDropDowndirective]'
                 })
           export class DropDowndirectiveDirective {

           @HostBinding('class.open') isOpen=false;

        @HostListener('click') toggleOpen(){
            this.isOpen=!this.isOpen;
         }
        constructor() { }

      }

package.json config

 "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",
          "styles.css"
      ],
            appmodule.ts

              @NgModule({


          declarations: [
        AppComponent,
        HeaderComponent,
        ShoppingListComponent,
        ShoppingEditComponent,
        ReciepsComponent,
        ReciepsDetailComponent,
        ReciepsListComponent,
        ReciepsItemComponent,
        DropDowndirectiveDirective

      ],
      imports: [
        BrowserModule,
        FormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }