在* ngIf之后调用方法 - Angular

Question

每当我的某个模板出现时，我想调用一个方法

<div *ngIf="test" class="col-md-8">
    <select class="form-control">
        <option type="text>{{test}}</option>
    </select>
</div>

是否可以在test包含值并执行*ngIf时执行方法？

Answer 1

你正以错误的方式接近它。不要调用方法，因为在DOM中发生了某些事情 - 这与Angular试图强制执行的模式背道而驰。

您的模型（来自.ts文件）应该控制模板，而不是相反。不要考虑“当模板的一部分消失时调用此方法”，而是退后一步并问自己：

  

导致*ngIf切换组件的原因是什么？

有你的答案。例如，假设你有以下内容。

toggle() {
  this.flag = !this.flag
}

这是您的模型更改的地方。如果您想在切换标志时发生其他事情，请在那里进行。

toggle() {
  doSomething()
  this.flag = !this.flag
}

如果您希望仅在引发标志（变为true）时才发生它，只需使用条件语句。

toggle() {
  if (!this.flag) {
    doSomething() // only when turning from false to true
  }
  this.flag = !this.flag
}