ウインドウイベントに基づくサービスの角度4非同期初期化

Question

Web3をAngular 4に正しく統合しようとすると、window3web3が存在するかどうかを確認する前にウインドウがロードされるのを待つ必要があるweb3サービスを作成します。注射した。そして、これが行われた後にのみ、このサービスに問い合わせることができるはずです。ここでMetamaskのマニュアルexcerptから関連するコードは次のとおりです。

window.addEventListener('load', function() { 

    // Checking if Web3 has been injected by the browser (Mist/MetaMask) 
    if (typeof web3 !== 'undefined') { 
    // Use Mist/MetaMask's provider 
    window.web3 = new Web3(web3.currentProvider); 
    } else { 
    console.log('No web3? You should consider trying MetaMask!') 
    // fallback - use your fallback strategy (local node/hosted node + in-dapp id mgmt/fail) 
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545")); 
    } 

    // Now you can start your app & access web3 freely: 
    startApp() 

}) 

私は私がやりたいように見えるthis other answerを見つけましたが、観察可能に約束を変換します。

このweb3オブジェクトをラップするAngular4サービスを初期化するにはどうしたらよいですか？web3のメンバに対するリクエストが初期化されるのを待つようにしますか？

現在、私が使用しているコードはインターバルを使用していますが、非常に乱雑だと感じるので、私はそれを気に入らないのです。

Answer 1

あなたのメインモジュールをブートストラップしたら、あなたのプロバイダをインスタンス化するために角度が使用するインジェクタのインスタンスを含むメインモジュールのインスタンスを取得します。したがって、そのインスタンスを取得してどこかに格納し、後でそれを使用してプロバイダをインスタンス化することができます。

、あなたはアプリ-injector.tsでアプリのインジェクターを保存したいとしましょう、それは次のようになり

//app-injector.ts 

import { Injector } from '@angular/core'; 

let appInjectorRef: Injector; 

export const appInjector = (injector?: Injector): Injector => { 
    if (!injector) { 
     return appInjectorRef; 
    } 

    appInjectorRef = injector; 

    return appInjectorRef; 
}; 

とのように見えるかもしれあなたのメインモジュールのブートストラップで

、

platformBrowserDynamic() 
    .bootstrapModule(TopLevelModule) 
    .then((appRef: any) => { 
    appInjector(appRef['injector']); // grab the injector instance and store. 
    }) 
    .catch((err) => console.error(err)); 

次に、たとえばAppComponentのように、

import {appInjector} from './app-injector'; 
export class AppComponent implements OnInit { 
    private service: ServiceThatUsesWeb3; 

    ngOnInit(): void { 
     //.. do web3 instantiation stuffs. 
     setTimeout(() => { 
      service = appInjector().get(ServiceThatUsesWeb3); 
      // use the service. 
     }); 
    } 
} 

のようにすることができます。setTimeout（ ）が重要です。そうでなければ、appInjector（）はあなたに未定義を返します。