nativescript - 如何从 NativeScript 自定义组件中公开方法？

Question

我想从 NativeScript 项目中的自定义组件公开一个方法。这是概念设置:

我的组件.xml
<StackLayout loaded="loaded"> ...UI markup... </StackLayout>

MyComponent.ts
export function loaded(args) { //do stuff };
export function myCustomMethod() { //do more stuff };

我的页面.xml
<Page xmlns:widget="..." loaded="loaded">
<widget:MyComponent id="myComponent" />
</Page>

我的页面.ts
export function loaded(args) {
let page = <Page>args.object;
let widget = page.getViewById("myComponent");
widget.myCustomMethod(); //<--THIS DOES NOT WORK
}

问:如何正确暴露myCustomMethod在自定义组件上，以便托管页面可以通过 JavaScript 访问和调用它？

默认情况下，当尝试在页面上获取对自定义组件的引用时，会返回对自定义组件布局容器的引用(在本示例中为 StackLayout)。

因此，作为一种解决方法，我正在这样做:

MyComponent.ts
export function loaded(args) {
let stackLayout = <StackLayout>args.object; //Layout container
stackLayout.myCustomMethod = myCustomMethod; //Attach custom method to StackLayout
}

这有点像黑客，但它正在工作。除了为布局容器创建父类(super class)之外，还有没有更好的方法来公开自定义组件方法？

更新

更准确地说，自定义组件具有实例属性，因此最终的解决方案需要支持这样的场景......

MyComponent.ts
let isStarted = false;
export function loaded(args){ // do stuff };
export function myCustomMethod() { isStarted = true; };


Answer 1

由于您要重用的方法未与您的 customCompoenent 耦合，因此您可以创建一个公共(public)文件并在需要时使用它，并相应地重用公开的方法。或者您可以直接导入您的 MyComponent.ts 并重用其导出的方法(这不是一个好主意，因为您可能可以访问 MyCompoent.ts 的所有公开方法，如 onLoaded、onNavigationgTo 等)

例如:

在您的 navigator.ts (或者如果您更喜欢 MyComponent.ts)

import frame = require("ui/frame");
export function navigateBack() {
    frame.goBack();
}

然后在需要的地方重用它，如下所示:

我的页面.ts

import navigatorModule = require("navigator");

export function goBack(args: observable.EventData) {
    navigatorModule.goBack(); // we are reusing goBack() from navigator.ts
}

另一个适用的选项是使用 MVVM 模式并通过绑定(bind)上下文公开您的方法。