Help us understand the problem. What is going on with this article?

AngularでGlobal上の外部ライブラリを呼び出してcallbackで戻ってくる方法+Observable

弊社ではangularを使っているのですが、
利用している外部サービスのjavascriptで、
処理完了したらglobal上に定義した指定の名前の関数を通して処理結果を返す
というものがあり、どうしても以下のような流れで組む必要がありました。

1.angularから外部のライブラリを呼び出す。その際、callbackのメソッド名を指定しておく

2.外部ライブラリは処理完了したら、global上に定義された"1"のcallbackの名前のfunctionを呼び出す

3.global上の定義されたfunctionからangularに戻ってくる

更に"1"~"3"までの処理をひとまとまりとしてobservableな感じで使いたい。

という場合、以下のようにしたらなんとかなった。

SampleService.ts
declare const window: any; // tslint回避のため

@Injectable()
export class SampleService{
  private isDone = false;
  private response;
  public constructor(...) {
    window.SampleService = this; // thisでglobal上に渡す。
  }

  /**
   * これが目的のメソッド。一旦外部ライブラリになげるが、Observableとして扱いたい。
   */
  public exec(): Observable<...> {
     const params = ...;
     // これが外部提供のライブラリ。 global上に定義された"callbackFunctionName"が呼び出される。
     // 同等のものを自前実装しようかとも思ったが、結構ヘビーだったのと、内部で仕様変更があった時に追随するのが大変なので諦めて使うことにした。
     OtherCompanyLibrary.call(params, "callbackFunctionName");

     return Observable
            .interval(100)
            .timeInterval() // 100ms毎のinterval
            .filter(() => {
                return this.isDone;
            })
            .take(1)
            .map(() => {
                return this.response;
            });
  }

  public callback(response) {
    this.response = response;
    this.isDone = true;
  }
}
index.html
<script>
function callbackFunctionName(response) {
  window.SampleService.callback(response);
}
</script>

windowを介してServiceクラスをやり取りするのと、
Observableのintervalをつかって、処理が完了するのを待つのがポイント。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away