如何公开公开角度2方法？ [英] How to expose angular 2 methods publicly?

问题描述

我目前正致力于将Backbone项目移植到Angular 2项目（显然有很多变化），其中一项项目要求需要公开访问某些方法。

I am currently working on porting a Backbone project to an Angular 2 project (obviously with a lot of changes), and one of the project requirements requires certain methods to be accessible publicly.

一个简单的例子：

组件

@component({...})
class MyTest {
    private text:string = '';
    public setText(text:string) {
        this.text = text;
    }
}

显然，我可以 < button（click）=setText（'hello world'）>点击我！< / button> ，我也想这样做。但是，我想要能够公开访问它。

Obviously, I could have <button (click)="setText('hello world')>Click me!</button>, and I would want to do that as well. However, I'd like to be able to access it publicly.

像这样

<button onclick="angular.MyTest.setText('Hello from outside angular!')"></click>

或者

// in the js console
angular.MyTest.setText('Hello from outside angular!');

方式，我希望这个方法公开曝光所以可以从angular 2应用程序外部调用。

Either way, I would like the method to be publicly exposed so it can be called from outside the angular 2 app.

这是我们在骨干网上做过的事情，但是我猜猜我的Google foo不够强大，无法使用angular找到一个好的解决方案。

This is something we've done in backbone, but I guess my Google foo isn't strong enough to find a good solution for this using angular.

我们宁愿只公开一些方法并列出公共api，所以如果你你也有这方面的提示，这将是一个额外的好处。 （我有想法，但欢迎其他人。）

We would prefer to only expose some methods and have a list of public apis, so if you have tips for doing that as well, it'd be an added bonus. (I have ideas, but others are welcomed.)

推荐答案

只需让组件在全局地图中注册，即可访问它来自那里。

Just make the component register itself in a global map and you can access it from there.

使用构造函数或 ngOnInit（）或任何其他lifecycle hooks 注册组件， ngOnDestroy（）取消注册它。

Use either the constructor or ngOnInit() or any of the other lifecycle hooks to register the component and ngOnDestroy() to unregister it.

当您从Angular外部调用Angular方法时，Angular无法识别模型更改。这是Angulars NgZone 的用途。
要获取对Angular区域的引用，只需将其注入构造函数

When you call Angular methods from outside Angular, Angular doesn't recognize model change. This is what Angulars NgZone is for. To get a reference to Angular zone just inject it to the constructor

constructor(zone:NgZone) {
}

你可以让区域它本身也可以在全局对象中使用，或者只是在区域内的组件内执行代码。

You can either make zone itself available in a global object as well or just execute the code inside the component within the zone.

例如

calledFromOutside(newValue:String) {
  this.zone.run(() => {
    this.value = newValue;
  });
}

或使用全球区域参考，如

or use the global zone reference like

zone.run(() => { component.calledFromOutside(newValue); });

https://plnkr.co/edit/6gv2MbT4yzUhVUfv5u1b?p=preview

在浏览器控制台中，您必须从切换< topframe> 到 plunkerPreviewTarget .... 因为Plunker在 iFrame中执行代码。然后运行

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

或

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

这篇关于如何公开公开角度2方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！