버튼을 클릭하면 드롭다운 메뉴가 열립니다.

Question

부트스트랩 5 cdn을 사용하고 있는데 드롭다운을 클릭하지 않고 드롭다운을 열고 싶습니다.

내비게이션 바를 사용하고 "드롭다운 링크"를 표시하고 싶습니다.

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="컨테이너-유체">
    <a class="navbar-brand" href="#">Navbar</a>
    <버튼
      class="navbar-toggler"
      유형="버튼"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNavDropdown"
      aria-controls="navbarNavDropdown"
      aria-expanded="false";
      aria-label="탐색 전환"
    >
      <span class="navbar-toggler-icon"></span>
    </버튼>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="페이지" href="#">홈</a>
        </li>
        <li class="nav-item dropdown">
          <a
            class="nav-link 드롭다운-토글"
            href="#"
            id="테스트"
            역할="버튼"
            data-bs-toggle="드롭다운"
            aria-expanded="false";
          >
            드롭다운 링크
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#>작업</a></li>
            <li><a class="dropdown-item" href="#">다른 작업</a></li>
            <li><a class="dropdown-item" href="#">여기에 다른 내용이 있습니다</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<button class="btn btn-primary btn-sm" (클릭)="open()">Abrir</button>

구성요소에서 다음을 수행하려고 시도했지만 작동하지 않습니다.

내보내기 클래스 AppComponent {
  열려 있는() {
    const dropdown = document.getElementById('test');
    dropdown.click();
  }
}

저는 stackblitz에서 해냈습니다: 테스트

Answer 1

버튼에 부트스트랩 속성 추가:

으아악

링크 코드: https://stackblitz.com/edit/angular-bootstrap-5-dynamic-navbar-77sj13?file=app/app.comComponent.html

그러나 작동할 것입니다. 각도 애플리케이션은 이러한 요소를 제어해야 하므로 외부 라이브러리를 프레임워크 라이브러리(Angular, Vue, React)와 혼합하면 항상 문제가 발생합니다

이를 위해 특별한 구현이 있습니다. 예: https://ng- bootstrap.github.io/#/home 각도 가이드

또 다른 옵션은 ngIf를 사용하여 탐색 모음을 표시하는 것입니다(기본적으로 애니메이션 없음)

다른 링크: https://stackblitz.com/edit/angular-bootstrap-5-dynamic-navbar-hygpzq?file=app/app.comComponent.html