ngOnChanges() 不会触发按钮点击

Question

我想触发一个按钮单击事件，该函数位于ngOnChanges() 中。但是，当单击按钮时，函数无法在 ngOnChanges() 内部触发。我错过了什么吗？

这是ts文件中的示例代码：

 import { Component, OnInit, Input, OnChanges } from '@angular/core';
    import { SafeResourceUrl, SafeHtml, DomSanitizer } from '@angular/platform-browser';
    declare var $: any;
    
    @Component({
        selector: 'sl-page',
        template: require('./sl-page.component.html')
    })
    export class PageComponent implements OnInit, OnChanges {
        constructor(
            private sanitizer: DomSanitizer
        ) { }
    
        ngOnInit() {
       
        }
    ngOnChanges() {
       
        $(function () {
            var btn= document.getElementsByClassName("buttonClass");
            var i;

            for (i = 0; i < btn.length; i++) {
                btn[i].addEventListener("click", function () {
                    /* Toggle between adding and removing the "active" class,
            to highlight the button that controls the panel */
                    this.classList.toggle("active");

                    /* Toggle between hiding and showing the active panel */
                    var panel = this.nextElementSibling;
                    if (panel.style.display === "block") {
                        panel.style.display = "none";
                    } else {
                        panel.style.display = "block";
                    }
                });
            }
        });
    }

按钮的 html 代码是：

<div class="buttonBlock" tabindex="0">
    <button class="buttonClass" type="button">{{"Button"}}</button>
    <div class="textClass">this is the text when button is expanded</div>
</div>

Answer 1

尝试像这样更改您的 ngOnChange 方法：

ngOnChanges() {
            var btn= document.getElementsByClassName("buttonClass");

            for (let button of btn) {
                button.addEventListener("click", () => {
                    /* Toggle between adding and removing the "active" class,
            to highlight the button that controls the panel */
                    this.classList.toggle("active");

                    /* Toggle between hiding and showing the active panel */
                    var panel = this.nextElementSibling;
                    //ternaire expression instead of if, just a proposition
                    panel.style.display = panel.style.display === "block" ? "none" ? "block"
                });
            }
    }