将登陆框的用户名和密码传递到子组件,正确写法:
Name: <input [(ngModel)]="username" class="form-control"><br> Password: <input [(ngModel)]="password" class="form-control"> <button class="btn btn-sm btn-primary" (click)="submit()">提交</button> <home-test [auth]="login"></home-test>
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: <input [(ngModel)]="login.username" class="form-control"><br> Password: <input [(ngModel)]="login.password" class="form-control"> <button class="btn btn-sm btn-primary" (click)="submit()">提交</button> <home-test [auth]="login"></home-test>
这种写法在子组件中只能监听到一次,更改login对象的值是不会传递到子组件的,我试着用ngOnChanges来监听也没有变化,我理解在单向数据绑定的时候源数据的value值必须有明显的变化,而单个参数的value变化很容易监听到,但是传递对象时可能由于对象内部value变了但key没有变,使得angular2 认为整个对象就没有变化,所以在子组件中没有实时更新
正确写法的关键在于每次调用getoption方法时有创建新对象的动作,所以被监听到了
官网也解释了,Angular 只会在输入属性的值变化时调用生命周期钩子。 而login属性的值是一个对象的引用。 Angular 不会关注这个对象的属性的变化。 这个对象的引用没有发生变化,于是从 Angular 的视角看来,也就没有什么需要报告的变化了。相关知识:https://angular.cn/docs/ts/latest/guide/lifecycle-hooks.html
原文地址:https://www.jb51.cc/angularjs/148734.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。