如何公开揭露角2种方法？ [英] How do expose angular 2 methods publicly?

问题描述

我目前的工作（有很多变化明显）移植一个骨干工程于角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;
    }
}

显然，我可以有＆LT;按钮（点击）=的setText（世界你好）gt;点击ME＆LT;！/按钮＆GT; ，我会要做到这一点。不过，我希望能够公开访问。

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

无论哪种方式，我想被人当众揭发的方法，因此可以从角2应用程序外部调用。

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

这是我们一直在做的骨干，但我想我的谷歌foo是没有强大到足以找到一个很好的解决这个采用了棱角分明。

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.

我们将preFER只揭露一些方法和具有公共的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（）或任何其它的生命周期挂钩注册的组件和 ngOnDestroy（）注销了。

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

当你打电话从外面角角的方法，角度不能识别模式的变革。这是Angulars NgZone 是。
去角区域的引用只是将其注入到构造

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) {
}

您可以让区本身提供一个全局对象也还是只执行区域内的组件内部的code。

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

或使用像

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

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

在浏览器控制台，你必须从＆LT开关; topframe＆GT; 到 plunker previewTarget .... 因为Plunker执行在的iFrame 的code。然后运行

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屋！