Angular中ViewChild\ngAfterViewInit\Promise的使用,在父组件初始化时等待子组件的返回值
作者:互联网
1、子component中的异步方法
initCreateJob = () =>
new Promise((resolve, reject) => {
setTimeout(() => {
this.spiderFormService.saveUserJob(this.spiderJobInfo).subscribe((res: Res) => {
if (res.code === 1) {
// val = res.data;
resolve(res.data)
// fn(this.spiderJobInfo.jobInfoId)
}else{
// 提交异常
reject("Error code: " + JSON.stringify(res))
}
});
}, 1000)
}
);
2、加载多个子组件
引入组件
<app-spider-form #test1></app-spider-form>
<app-image-check-form #test2></app-image-check-form>
3、父组件的component中引用子组件component
export class parentComponent implements OnInit,AfterViewInit{
// 引用子组件
@ViewChild('test1', {static: false}) test1;
@ViewChild('test2', {static: false}) test2;
constructor() {
}
ngOnInit() {
}
ngAfterViewInit(){
// 子组件加载完毕触发
this.initSpiderJob();
}
initSpiderJob(){
forkJoin([
from(this.test1.initCreateJob()).pipe(catchError(error => of(`Bad Promise: ${error}`))),
from(this.test2.initCreateJob()).pipe(catchError(error => of(error)))
])
.subscribe(results => {
console.log("results" + JSON.stringify(results))
});
}
}
个人博客 蜗牛
标签:test1,test2,res,results,ViewChild,Promise,error,组件 来源: https://www.cnblogs.com/codeobj/p/11934951.html