我怎样才能发现孩子的变化

时间:2017-02-17 13:13:52

标签: angular typescript

我在开始时有一个空数组。之后我将对象推送到该数组。

此数组在父组件中,并由[input]传递给子组件 问题是当我添加一个对象时,孩子没有检测到任何变化。

我使用ngOnChanges,当我扩展数组时,没有更改的日志:(

<!DOCTYPE html>
<html>
<head>
	<title>Bienvenue!</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
	<link rel="shorcut icon" href="favicon (2).ico"/>
</head>
<body>
	<!-- Logo section -->		
	<img id="logo" src="logo.png"/>

	<!-- Icons section -->
	<div id="fbicon" class="icons"><a href="#"><img src="icons/facebook.png"/></a> </div>		
	<div id="liin" class="icons"><a href="#"><img src="icons/linkedin.png"/></a></div>

	
	
</body>
</html>

所以我不知道当孩子知道父数据发生变化时我怎么能调用任何动作

2 个答案:

答案 0 :(得分:1)

使用@output和EventEmitter概念检测子组件上发生的更改并将其传递给父组件

@Output() userName : EventEmitter<string>= new EventEmitter<string>();

并在父组件模板中调用上面使用的变量

 <child-component (userName)='OnDataChange($event)'></child-component>

Full Reference

答案 1 :(得分:0)

您无法记录每次发送的“更改”,但您仍然可以在 ngOnChanges 中调用操作

如果您的@Input获得更新数据 ngOnChanges 将会触发,您可以在那里调用一个函数。例如。

@Input() listings: List; //assume this is array of list

ngOnChanges(changes: SimpleChanges) {

  if(this.listings)
    this.onClick(this.listings[0]); //on changes, call Onclick on 1st list

}

onClick(list){
//do something with list
}