Angular2 - 如何从应用程序外部调用组件函数

问题描述

我正在使用具有回调的 javascript 对象.一旦回调被触发，我想在 Angular2 组件中调用一个函数.

示例HTML 文件.

 var run = new Hello('callbackfunction');函数回调函数(){//如何调用函数 **runThisFunctionFromOutside**}<脚本>系统配置({转译器:'打字稿'，打字稿选项:{emitDecoratorMetadata:true}，包:{'js/app':{defaultExtension:'ts'}}});System.import('js/app/main').then(null, console.error.bind(console));

我的App.component.ts

import {Component NgZone} from 'angular2/core';从'./buttons/game-buttons.component'导入{GameButtonsComponent}；@成分({选择器:'我的应用'，模板:'bllb'})导出类 AppComponent {构造函数(私有_ngZone:NgZone){}ngOnInit(){叫从外面(){this._ngZone.run(() => {this.runThisFunctionFromOutside();});}}runThisFunctionFromOutside(){console.log("运行");}

如何调用 App.component.ts 内的函数 runThisFunctionFromOutside

解决方案

另见 如何公开 angular-2方法公开?

当组件被构造时，让它将自己分配给一个全局变量.然后你可以从那里引用它并调用方法.不要忘记使用 zone.run(() => { ... }) 以便 Angular 收到有关所需更改检测运行的通知.

 函数 callbackfunction(){//window['angularComponentRef'] 可能还没有在这里设置window['angularComponent'].zone.run(() => {runThisFunctionFromOutside();});}构造函数(私有_ngZone:NgZone){window['angularComponentRef'] = {component: this, zone: _ngZone};}ngOnDestroy() {window.angularComponent = null;}

Plunker 示例 1

在浏览器控制台中，您必须从 切换到 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 库的通信

Plunker 示例 2(来自评论)>

I am using a javascript Object that has a callback. Once the callback is fired I want to call a function inside an Angular2 component.

exampleHTML file.

    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>

My 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");
}

How can i call the function runThisFunctionFromOutside which is inside App.component.ts

解决方案

See also How do expose angular 2 methods publicly?

When the component is constucted make it assign itself to a global variable. Then you can reference it from there and call methods.Don't forget to use zone.run(() => { ... }) so Angular gets notified about required change detection runs.

 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;
}

Plunker example1

In the browser console you have to switch from <topframe> to plunkerPreviewTarget.... because Plunker executes the code in an iFrame. Then run

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

or

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

An alternative approach

would be to dispatch events outside Angular and listen to them in Angular like explained in Angular 2 - communication of typescript functions with external js libraries

Plunker example2 (from the comments)

这篇关于Angular2 - 如何从应用程序外部调用组件函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！