目标 Bootstrap HTML 元素，其中 data-bs-target 来自 Angular 中的另一个元素

Question

我正在尝试从 Angular 12 中的图标单击事件打开 Bootstrap (5) Offcanvas 菜单。我尝试了很多方法，包括将它包装在一个按钮中（这适用于一个图标，但我有一个<fa-stack></fa-stack> element 并且出于某种原因这不起作用），针对隐藏按钮的元素id ，如下所示：

<button #menuOpen [hidden]="true" class="btn" data-bs-toggle="offcanvas" data-bs-target="#slide-out-menu" 
type="button" aria-controls="slide-out-menu">
</button>

<fa-stack (click)="menuOpen.click()">
  <fa-icon [icon]="faCircle" stackItemSize="2x"></fa-icon>
  <fa-icon [icon]="icon" [inverse]="true" stackItemSize="1x"></fa-icon>
</fa-stack>

<div #slideOutMenu class="offcanvas offcanvas-end" id="slide-out-menu" aria-labelledby="menu-label">
  <div class="offcanvas-header">
  </div>
  <div class="offcanvas-body">
  </div>
</div>

并且还添加了一个[ngClass]="{'show', showMenu}"指令，但它不起作用。

有没有办法定位这个元素并通过点击事件显示它（而不是直接在按钮上）？

Answer 1

解决方案 1

如果隐藏按钮和<fa-stack>元素在同一个组件中，您可以使用ViewChild来定位隐藏按钮。 然后使用它的nativeElement通过 Renderer2 改变 DOM：

@Component({
  selector: 'my-app',
  template : `
    <button #menuOpen [hidden]="true" class="btn" data-bs-toggle="offcanvas" data-bs-target="#slide-out-menu" 
type="button" aria-controls="slide-out-menu">
    </button>

    <fa-stack (click)="toggleMenuButton()">
        <fa-icon [icon]="faCircle" stackItemSize="2x"></fa-icon>
        <fa-icon [icon]="icon" [inverse]="true" stackItemSize="1x"></fa-icon>
    </fa-stack>
  `
})
export class App {

    @ViewChild('menuOpen') menuButton: ElementRef;

    constructor(private renderer: Renderer2) { }

    toggleMenuButton() {
        // Add "show" CSS-class to button
        this.renderer.addClass(this.menuButton.nativeElement, 'show');

        // Remove "show" CSS-class from button
        this.renderer.removeClass(this.menuButton.nativeElement, 'show');

        // Add "hide" CSS-class to button
        this.renderer.addClass(this.menuButton.nativeElement, 'hide');

        // Remove "hide" CSS-class from button
        this.renderer.removeClass(this.menuButton.nativeElement, 'hide');
    }
}

---

解决方案 2

如果它们不在同一个组件中，您也可以通过使用带有纯 javascript 的querySelector()并搜索具有特定属性和值的元素来实现此目的。 因此，在您的情况下，使用此代码获取具有属性data-bs-target和值#slide-out-menu的button ：

 var targetElement = document.querySelector("button[data-bs-target='#slide-out-menu']"); console.log(targetElement);

 <button #menuOpen [hidden]="true" class="btn" data-bs-toggle="offcanvas" data-bs-target="#slide-out-menu" type="button" aria-controls="slide-out-menu"> I am the button </button>

然后更改 CSS 或targetElement的类

const showMenu = () => {
    targetElement.classList.add("show");
    targetElement.classList.remove("hide");
}

const hideMenu = () => {
    targetElement.classList.remove("show");
    targetElement.classList.add("hide");
}