时间戳

首页 > 解决方案 > 如何在 ngOnInit 中使用等待/异步？

angular - 如何在 ngOnInit 中使用等待/异步？

问题描述

我试图在 中调用一个函数ngOnInit()并为其提供两个值。所以这是我试图在内部调用的函数ngOnInit： this.complexWordIdentification(this.postIWant, this.theHardWords);

这里的问题是，this.postIWant并且正如您在下面看到的那样，它本身this.theHardWords正在得到解决，这导致了错误。ngOnInit现在我怎样才能调用this.complexWordIdentification(this.postIWant, this.theHardWords);并输入这些值而不会出错？

我一直在考虑等待功能？但是我想不通，请对此有任何建议吗？

这是我的ngOnInit：

ngOnInit() {
    this.isLoading = true;
    this.wordsLoaded = false;
    this.postLoaded = false;
    this.form = new FormGroup({
      annotation: new FormControl(null, {
        validators: [
          Validators.required,
          Validators.minLength(8),
          Validators.maxLength(250)
        ]
      })
    });
    this.id = this.route.snapshot.paramMap.get('postId');
    this.annotationService.getWords();
    this.annotationSub = this.annotationService
      .getWordUpdateListener()
      .subscribe((thewords: ComplexWord[]) => {
        this.thewords = thewords;
        this.thewords.map(word => {
          this.theHardWords.push(word.word);
          this.wordWithAnnotation.push(word);
        });
        this.wordsLoaded = true;
        this.isLoading = this.postLoaded && this.wordsLoaded;
      });
    this.postsService.getPosts();
    this.postsSub = this.postsService
      .getPostUpdateListener()
      .subscribe((posts: Post[]) => {
        this.posts = posts;
        this.posts.map(post => {
          if (post.id === this.id) {
            this.postIWant = post.fileText;
          }
        });
        this.postLoaded = true;
        this.isLoading = !(this.postLoaded && this.wordsLoaded);
      });
    this.role = this.authService.getUserRole();
    this.userIsAuthenticated = this.authService.getIsAuth();
    this.authStatus = this.authService
      .getAuthStatus()
      .subscribe(isAuthenticated => {
        this.userIsAuthenticated = isAuthenticated;
        this.role = this.authService.getUserRole();
      });
}

如果有人能指出我正确的方向，那就太好了，因为我在这个领域没有太多经验。目前我不得不在this.complexWordIdentification(this.postIWant, this.theHardWords);外部调用ngOnInit以避免错误，但显然，我想自动调用它。

标签： angulartypescriptecmascript-6

解决方案

forkJoin将两个订阅合并为一个，并返回其结果数组。ngOnInit当您在完成加载组件之前需要来自多个来源的数据时，使用它非常有用。

https://www.learnrxjs.io/operators/combination/forkjoin.html

import { Observable } from "rxjs/Observable";
    Observable.forkJoin(
        this.annotationService.getWordUpdateListener(),
        this.postsService.getPostUpdateListener()
    ).subscribe((data) => {
         // data[0] result from getWordUpdateListener
         this.thewords = data[0];
            this.thewords.map(word => {
              this.theHardWords.push(word.word);
              this.wordWithAnnotation.push(word);
            });
            this.wordsLoaded = true;

         // data[1] result from getPostUpdateListener
         this.posts.map(post => {
              if (post.id === this.id) {
                this.postIWant = post.fileText;
              }
            });
            this.postLoaded = true;
        this.isLoading = false;
        this.complexWordIdentification(this.postIWant, this.theHardWords);
    }, (err) => {
        // error handling
    });

编辑：在 RXJS 5 及以下版本中添加了 Observable 的导入语句

编辑：RXJS 6 更新，更改导入语句

import { forkJoin} from 'rxjs';
forkJoin(this.annotationService.getWordUpdateListener(),
            this.postsService.getPostUpdateListener()
).subscribe((data) => { \\do stuff}, (err) => { \\ do error stuff}

编辑 2：RXJS 更改了 forkJoin 的签名，它现在需要一个数组

    forkJoin([this.annotationService.getWordUpdateListener(),
            this.postsService.getPostUpdateListener()]
).subscribe((data) => { \\do stuff}, (err) => { \\ do error stuff}

推荐阅读