javascript - Angular 我不使用 (load) 调用函数

Question

我希望该函数在 div 打开时起作用，但它不起作用。

html:

<div class="row table-dark table-bordered">
  <div class="col-xl-12" (click)="isCollapsed=!isCollapsed;">
     Click Me!
   <ng-container *ngIf="isCollapsed;">
   <div class="col-xl-12" (load)="test()" id="test"></div>
       Open
    </ng-container>
  </div>
</div>

功能

test() {
   console.log("is work");
   const firstRow = document.createElement('div');
   firstRow.innerText = 'Eureka';
   firstRow.style.color = 'red';
   document.getElementById('test').appendChild(firstRow);
}

实例: https://codesandbox.io/embed/focused-mendeleev-t7y4h?fontsize=14&hidenavigation=1&theme=dark

Answer 1

没有任何东西像 (load) Angular 。尝试一下

<div class="row table-dark table-bordered">
  <div class="col-xl-12" (click)="isCollapsed=!isCollapsed;">
     Click Me!   
  </div>
  <ng-container *ngIf="isCollapsed;">
    <div class="col-xl-12" (click)="test()" id="test">Open</div>
  </ng-container>
</div>

您的代码的问题是您有 (click)="isCollapsed=!isCollapsed;"超过父级div ，所以test()即使您更改 load 也不起作用至click 。所以我把它作为一个单独的 div 移出了。

Here is working demo .