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))
});
}}


个人博客 蜗牛