使用 Angular 中另一个元素的 data-bs-target 定位 Bootstrap HTML 元素答案

【问题标题】：Target Bootstrap HTML element with data-bs-target from another element in Angular使用 Angular 中另一个元素的 data-bs-target 定位 Bootstrap HTML 元素
【发布时间】：2021-11-20 16:36:28
【问题描述】：

我正在尝试从 Angular 12 中的图标单击事件打开 Bootstrap (5) Offcanvas 菜单。我尝试了许多方法，包括将其包装在一个按钮中（这适用于一个图标，但我有一个 <fa-stack></fa-stack> 元素和由于某种原因，这不起作用），针对隐藏按钮的元素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}" 指令。

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

【问题讨论】：

标签： javascript html angular twitter-bootstrap

【解决方案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>

然后更改targetElement的CSS或类

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

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

【讨论】：