javascript - Angular - 在 *ngIf 显示元素后执行代码

Question

在我的应用程序中，我有一个帮助部分，它仅在 this.car.helpOpen 时可见。属性为真，最初属性为假:

<ion-item *ngIf="car.helpOpen">
          <div class="car-help-content" item-content>
            <img src="{{testURL}}" />
            <p class="explanations" [innerHTML]="car.helpText"> </p>
          </div>
 </ion-item>

我有一个方法可以更改 this.car.helpOpen 的值为真，然后向所有 <a> 添加一个事件处理程序<a> 内的元素(car.helpText 包含 <p> 元素)元素:

  toggleHelp(input){
    input.helpOpen=!input.helpOpen;
    $("p.explanations").find("a").click(function(e){
      alert(e.target.innerHTML);
    });
  }

但我认为事件处理程序的附加发生在 *ngIf 实际显示帮助部分之前，这就是事件处理程序未被附加的原因。如果我完全删除 *ngIf 并执行函数 toggleHelp()，处理程序将被附加。

我有办法解决这个问题吗？

也许有一种不使用 jQuery 来添加事件处理程序的方法？ (不改变元素的实际 innerHTML)

Answer 1

ngIf is a structural directive ，它在 DOM 中创建/销毁内容。您可以通过 css 隐藏元素，例如添加类将使 display:none

What is the difference between *ngIf and [hidden]

您可以将点击事件添加到 p 元素并检查目标元素是否为这看起来像使用纯 javascript 将事件监听器添加到 a 元素而没有 < em>jquery

模板

<p [innerHTML]="html" (click)="toggleHelp({},$event)"></p>

切换帮助功能

 toggleHelp(input , e:MouseEvent) : void{
    input.helpOpen=!input.helpOpen;

    console.log('event element',e);
     if ((e.target as HTMLElement).tagName === 'A') { 
       let target = e.target as HTMLElement;

       // everything here will run if you click on a element

       alert(target.innerHTML)
     }
    }

stackblitz example