gpt4 book ai didi

Angular2 - 如何从应用程序外部调用组件功能

转载 作者:太空狗 更新时间:2023-10-29 16:45:59 24 4
gpt4 key购买 nike

我正在使用具有回调的 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");
}

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

最佳答案

我基本跟着this answer ,但我不希望我的“外部”代码知道有关 NgZone 的任何信息。这是 app.component.ts:

import {Component, NgZone, OnInit, OnDestroy} from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
constructor(private ngZone: NgZone) {}

ngOnInit() {
window.my = window.my || {};
window.my.namespace = window.my.namespace || {};
window.my.namespace.publicFunc = this.publicFunc.bind(this);
}

ngOnDestroy() {
window.my.namespace.publicFunc = null;
}

publicFunc() {
this.ngZone.run(() => this.privateFunc());
}

privateFunc() {
// do private stuff
}
}

我还必须为 TypeScript 添加定义以扩展窗口对象。我把它放在 typings.d.ts 中:

interface Window { my: any; }

从控制台调用函数现在非常简单:

my.namespace.publicFunc()

关于Angular2 - 如何从应用程序外部调用组件功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35296704/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com