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

      });

  }

}

个人博客蜗牛

巴特西

Angular中ViewChild\ngAfterViewInit\Promise的使用，在父组件初始化时等待子组件的返回值

1、子component中的异步方法

2、加载多个子组件

3、父组件的component中引用子组件component

最新文章

热门文章