Angular 我不使用 (load) 调用函数答案

【问题标题】：Angular I don't call a function with (load)Angular 我不使用 (load) 调用函数
【发布时间】：2020-04-23 06:01:24
【问题描述】：

我希望该功能在打开 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

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

在角度上没有 (load) 那样的东西。试试

<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，因此即使您将 load 更改为 click，test() 也无法正常工作。所以我把它作为一个单独的 div 移出来了。

Here is working demo.

【讨论】：

> 我希望该功能在打开 div 时起作用
@pascalpuetz：你说得有道理。我已经发布并要求用户回答。您的回答提供了另一种方法。所以我没有走那条路。恕我直言，这个问题缺少更多描述。干杯:)
没错，这个问题也可以用你的方式来解释——它会定义。对偶然发现此问题的用户有所帮助。干杯! :)
@pascalpuetz：是的

【解决方案2】：

您已经有一个正在触发的事件完全符合您的需要：“打开” div 的单击。除了在模板中设置 isCollapsed 变量之外，您还可以像这样调用那里的函数：

模板

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

component.ts

// Call this method to open/close your div
toggleOpenMyDiv() { 
   this.isCollapsed = !this.isCollapsed; // set the variable
   if (this.isCollapsed) {
      this.test(); // Then call test
   }
}

test() {
   console.log("is work");

   // You should not do the following lines in angular (it works but is a very bad practice!)
   const firstRow = document.createElement('div');
   firstRow.innerText = 'Eureka';
   firstRow.style.color = 'red';
   document.getElementById('test').appendChild(firstRow);
}

此外，我强烈建议不要像在 test() 方法中尝试那样手动创建 HTML 元素。您可以通过在 HTML 中使用 Bindings 让 Angular 为您完成这项工作。

例如，如果您尝试在打开时添加行：

模板

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

          <!-- The template for each row, angular will update this for you based on the "rows" variable -->
          <div *ngFor="let row of rows" [style.color]="row.color">{{row.text}}</div>

       </div>
       Open
     </ng-container>
  </div>
</div>

component.ts

rows = []; // Every row that should be iterated over in the template

// Call this method to open/close your div
toggleOpenMyDiv() { 
   this.isCollapsed = !this.isCollapsed; // set the variable
   if (this.isCollapsed) {
      this.test(); // Then call test
   }
}

test() {
   console.log("is work");
   // Add a row to the array, angular will take care of updating the template, just don't mutate the array but create a new one with the modifications
   this.rows = [...this.rows, {color: 'red', text: 'Eureka'}];
}

这里是Stackblitz。

【讨论】：