Angular2 - アプリの外からコンポーネントの関数を呼び出す方法

質問

私はコールバックを持つjavascriptオブジェクトを使用しています。コールバックが発生したら、Angular2コンポーネント内の関数を呼び出したいと思っています。

例 HTMLファイルです。

    var run = new Hello('callbackfunction');

    function callbackfunction(){   
     // how to call the function **runThisFunctionFromOutside**
   }
   <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'js/app': {defaultExtension: 'ts'}} 
      });
      System.import('js/app/main')
            .then(null, console.error.bind(console));
    </script>

私の App.component.ts

import {Component NgZone} from 'angular2/core';
import {GameButtonsComponent} from './buttons/game-buttons.component';
@Component({
  selector: 'my-app',
  template: ' blblb'
})
export class AppComponent {

constructor(private _ngZone: NgZone){}

ngOnInit(){
    calledFromOutside() {
        this._ngZone.run(() => {
          this.runThisFunctionFromOutside();
    });
  }
  }
runThisFunctionFromOutside(){
   console.log("run");
}

どのようにすれば runThisFunctionFromOutside これはApp.component.tsの中にあります。

どのように解決するのですか？

こちらもご覧ください どのようにangular 2のメソッドを公に公開するのですか？

コンポーネントが構築されたとき、それ自身をグローバル変数に代入させます。それから、そこから参照し、メソッドを呼び出すことができます。 その際、忘れずに zone.run(() => { ... }) を使って、必要な変更検知の実行をAngularに通知することを忘れないでください。

 function callbackfunction(){   
   // window['angularComponentRef'] might not yet be set here though
   window['angularComponent'].zone.run(() => {
     runThisFunctionFromOutside(); 
   });
 }

constructor(private _ngZone: NgZone){
  window['angularComponentRef'] = {component: this, zone: _ngZone};
}

ngOnDestroy() {
  window.angularComponent = null;
}

プランカー例1

ブラウザのコンソールで <topframe> から plunkerPreviewTarget.... というのは、Plunkerがコードを実行する際に iFrame . そして、実行

window['angularComponentRef'].zone.run(() => {window['angularComponentRef'].component.callFromOutside('1');})

または

window.angularComponentRef.zone.run(() => {window.angularComponentRef.componentFn('2');})

別のアプローチ

で説明されているように、Angular の外部でイベントをディスパッチし、Angular でそれをリッスンすることです。 Angular 2 - typescript関数と外部jsライブラリとのコミュニケーション

プランカー例2 (コメントより)