angular2 组件之间传参数

将登陆框的用户名和密码传递到子组件，正确写法：

Name: 

Password: 
提交

export class ExampleFather {username: any;password: any;login: any;submit() {this.login = this.getOption();}getOption() {let option = {username: this.username,password: this.password};return option;}}

export class ChildComponent {@Input() auth: any;@Input('auth') set changeName(val: any) {console.log(val);}
}

这样写就能保证每次传递给子组件的login对象是新产生的，angular2 就能监听到对象变化

错误写法：

Name: 

Password: 
提交

这种写法在子组件中只能监听到一次，更改login对象的值是不会传递到子组件的，我试着用ngOnChanges来监听也没有变化，我理解在单向数据绑定的时候源数据的value值必须有明显的变化，而单个参数的value变化很容易监听到，但是传递对象时可能由于对象内部value变了但key没有变，使得angular2 认为整个对象就没有变化，所以在子组件中没有实时更新

正确写法的关键在于每次调用getOption方法时有创建新对象的动作，所以被监听到了

官网也解释了，Angular 只会在输入属性的值变化时调用生命周期钩子。 而login属性的值是一个对象的引用 。 Angular 不会关注这个对象的属性的变化。 这个对象的引用没有发生变化，于是从 Angular 的视角看来，也就没有什么需要报告的变化了。相关知识：https://angular.cn/docs/ts/latest/guide/lifecycle-hooks.html

转载于:https://my.oschina.net/u/2499632/blog/758139

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！