javascript - Angular:检查组件中的输出变量何时发生变化？

Question

如何检查组件中的输出是否发生变化？然后运行另一个方法

这是父组件，

从 Child 获取数据后，想要立即运行另一个事件。

父 HTML:

    <div>
        Address Type:* 
        <app-address-type-dropdown (selectedItemOutput) = "test"></app-address-type-dropdown>
    </div>

父 typescript :

目标:当输出值时，检测父级的变化，并编写控制台命令。

export class AddressFormatheaderFormComponent implements OnInit {

constructor() { }
public test: any;

public sayHi(){
  console.log(this.test);
 }

 ngOnInit() {
 }
}

Answer 1

您可以通过创建另一个函数来实现这一点，本质上是一个事件处理程序。所以当你的子组件 <app-address-type-dropdown>发出一个值，该事件处理程序将负责下一步做什么。

例如onNewItemSelect($event)是事件处理程序。

<div>
  Address Type:* 
  <app-address-type-dropdown (selectedItemOutput)="onNewItemSelect($event)"></app-address-type-dropdown>
</div>

export class AddressFormatheaderFormComponent implements OnInit {

  constructor() { }
  public test: any;

  ngOnInit() {
  }

  onNewItemSelect(itemSelected){
     this.test = itemSelected;
     console.log(this.test);
     //do something else
  }
}

已阅读 Angular official docs on component interaction 的这一部分了解更多信息。