typescript - როგორ შემიძლია Bootstrap Dropdown-ის პროგრამულად კონტროლი (Angular)


ჩემს ხედვაში მაქვს შემდეგი Dropdown და მინდა ვ გახსნა/დაკეტო ის ჩემი TypeScript კლასიდან. როგორ უნდა გავაკეთო ეს?

მადლობა ნებისმიერი დახმარებისთვის!

 <div ngbDropdown class="d-inline-block">
      <button class="btn" id="cartDropdown" ngbDropdownToggle>Warenkorb<img class="warenkorbNavbar"
          src="../assets/img/shopping-cart.png" /></button>
      <div ngbDropdownMenu aria-labelledby="cartDropdown">

პასუხი #1

თქვენ შეგიძლიათ მიუწვდეთ dropdown-თან TS ფაილიდან @ViewChild()-ის გამოყენებით.

დაამატეთ ტემპლატის ცვლადი ngbDropdown-ისთვის, მაგალითად #dropdown

<div #dropdown ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown
  </button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button ngbDropdownItem>Action - 1</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem>Something else is here</button>
  </div>
</div>

შემდეგ გამოიყენეთ @ViewChild() თქვენი TypeScript ფაილში. ამის შემდეგ შეგიძლიათ დაბმულ დრაფნისზე open მეთოდი გამოიძახოთ TypeScript-ში

@Component({
  selector: 'ngbd-dropdown-basic',
  templateUrl: './dropdown-basic.html',
})
export class NgbdDropdownBasic {
  @ViewChild(NgbDropdown, { static: true })
  public dropdown: NgbDropdown;

  public toggleDropdown(): void {
    this.dropdown.open();
  }
}

სამუშაო Stackblitz მაგალითი...

https://stackblitz.com/edit/angular-7vbmva