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

Question

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

MyComponent.xml <StackLayout loaded="loaded"> ...UI markup... </StackLayout>

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

MyPage.xml <Page xmlns:widget="..." loaded="loaded"> <widget:MyComponent id="myComponent" /> </Page>

MyPage.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 }

这有点小技巧，但它确实有效。除了为布局容器创建超类之外，有没有更好的方法来公开自定义组件方法？

更新

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

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

Answer 1

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

例如：

在您的 navigator.ts 中（或者如果您更喜欢 MyComponent.ts）

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

然后像这样在需要的地方重用它：

MyPage.ts

import navigatorModule = require("navigator");

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

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