Question

在我的应用程序中，我有一个帮助部分，该部分仅在<div class="container"> <h1>Custom Checkboxes</h1></br> <label class="customcheck">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="customcheck">Two <input type="checkbox"> <span class="checkmark"></span> </label> <label class="customcheck">Three <input type="checkbox"> <span class="checkmark"></span> </label> <label class="customcheck">Four <input type="checkbox"> <span class="checkmark"></span> </label> </div>属性为true且最初该属性为false时才可见：

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>的值更改为true，然后将事件处理程序添加到内部所有this.car.helpOpen元素（car.helpText包含<a>元素）中<a>元素：

<p>

但是我认为事件处理程序的附件是在* ngIf实际显示帮助部分之前发生的，这就是事件处理程序没有被附加的原因。如果我将* ng完全删除并执行功能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元素添加事件监听器类似，而无需使用 jquery

模板

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

toggleHelp函数

 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

角度-执行代码AFTER * ng如果已显示元素

1 个答案: