当我在bootstrap中使用导航栏下拉菜单时，我在angular中不能有多个单击事件

<div ngbDropdown>
  <button class="btn btn-primary" id="dropdownBasic" ngbDropdownToggle>
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownBasic" ngbDropdownMenu>
    <a class="dropdown-item" href="#">菜单项1</a>
    <a class="dropdown-item" href="#">菜单项2</a>
  </div>
</div>

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

@Component({
  selector: 'app-dropdown-example',
  templateUrl: './dropdown-example.component.html',
  styleUrls: ['./dropdown-example.component.css']
})
export class DropdownExampleComponent {
  dropdown: NgbDropdown;

  constructor() { }

  toggleDropdown() {
    if (this.dropdown.isOpen()) {
      this.dropdown.close();
    } else {
      this.dropdown.open();
    }
  }
}

<div ngbDropdown #dropdown="ngbDropdown">
  <button class="btn btn-primary" id="dropdownBasic" ngbDropdownToggle (click)="toggleDropdown()">
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownBasic" ngbDropdownMenu [isOpen]="dropdown.isOpen()">
    <a class="dropdown-item" href="#">菜单项1</a>
    <a class="dropdown-item" href="#">菜单项2</a>
  </div>
</div>