如何向bootstrap 4导航栏添加ngbDropdown

<!-- 引入Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<!-- 引入ng-bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ng-bootstrap/ng-bootstrap@10.0.0/dist/ng-bootstrap.min.css">

<!-- 引入Angular和ng-bootstrap的依赖 -->
<script src="https://unpkg.com/@angular/core@12.0.0/bundles/core.umd.min.js"></script>
<script src="https://unpkg.com/@angular/common@12.0.0/bundles/common.umd.min.js"></script>
<script src="https://unpkg.com/@angular/forms@12.0.0/bundles/forms.umd.min.js"></script>
<script src="https://unpkg.com/@ng-bootstrap/ng-bootstrap@10.0.0/dist/ng-bootstrap.min.js"></script>

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

export class YourComponent {
  isDropdownOpen = false;
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" (click)="isDropdownOpen = !isDropdownOpen">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" [ngbCollapse]="!isDropdownOpen">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" ngbDropdownToggle>
          Dropdown
        </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>
    </ul>
  </div>
</nav>

export class YourComponent implements OnInit {
  isDropdownOpen = false;

  ngOnInit() {
    NgbDropdown.init();
  }
}