文章内容
2020/6/30 10:55:33,作 者: 黄兵
Angular 在子组件调用父组件方法
子组件和父组件都要做一件事的时候，如果在父组件定义好了事件，那么在子组件如何调用呢？
下面事详细示例代码：
父组件Component：
export class ContactInfo implements OnInit {
phoneForm: FormGroup;
phones: Phone[];
constructor(private fb: FormBuilder,
private userService: UserService) {
}
ngOnInit() {
this.userService.getDataPhones().subscribe(
phones => {
this.phones = phones;
});
this.phoneForm = this.fb.group({
phone: ['', [Validators.pattern(PHONE_PATTERN)]]
});
}
deletePhone(phone: Phone) {
this.userService.deleteUserPhone(phone)
.subscribe(res => {
let index = this.phones.indexOf(phone);
if (index > -1) {
this.phones.splice(index, 1);
}
});
}
}子组件代码如下：
class ChildComponent {
@Output() someEvent = new EventEmitter<string>();
callParent() {
this.someEvent.next('somePhone');
}
}<child-component (someEvent)="deletePhone($event)"这样就可以子组件调用父组件的方法了。
但是这也存在一些问题：
1、有返回值的情况下，可能存在一些问题；
2、调用的父组件事件，数据很难反映给子组件。
所以在使用的时候，也需要看具体情况。
参考资料：
评论列表