错误:ActionItem不是有效的View实例

时间:2017-04-26 22:21:14

标签: nativescript angular2-nativescript nativescript-telerik-ui

我有以下模板:

<Page.actionBar>
    <ActionBar title="Modules" automationText="ActionBar">
        <NavigationButton icon="res://back_btn" tap="goBack" automationText="GoBack"></NavigationButton>
        <Android>
            <ActionItem id="exampleMenuButton" icon="res://menu" automationText="ExampleMenu"></ActionItem>
        </Android>
        <iOS>
            <ActionItem id="exampleMenuButton" ios.position="right" automationText="ExampleMenu">
                <ActionItem.actionView>
                    <Image src="res://menu" width="22" height="22" margin="0, -11, 0, 11"></Image>
                </ActionItem.actionView>
            </ActionItem>
        </iOS>
    </ActionBar>
</Page.actionBar>

来自nativescript-marketplace-demo。首先我必须将标签更改为非自动关闭,因为Only void and foreign elements can be self closed "NavigationButton" - 类似错误,现在得到下面的错误,为什么?

CONSOLE ERROR file:///app/vendor.js:1688:24: ERROR Error: Uncaught (in promise): Error: ActionItem is not a valid View instance.
_addView@file:///app/vendor.js:77124:28 [angular]
addChild@file:///app/vendor.js:79138:22 [angular]
insertChild@file:///app/vendor.js:58553:32 [angular]
appendChild@file:///app/vendor.js:57775:38 [angular]
appendChild@file:///app/vendor.js:13726:34 [angular]
createElement@file:///app/vendor.js:9925:33 [angular]
createViewNodes@file:///app/vendor.js:12532:57 [angular]
callViewAction@file:///app/vendor.js:12944:28 [angular]
execComponentViewsAction@file:///app/vendor.js:12883:27 [angular]
createViewNodes@file:///app/vendor.js:12601:29 [angular]
createRootView@file:///app/vendor.js:12479:20 [angular]
callWithDebugContext@file:///app/vendor.js:13610:47 [angular]
create@file:///app/vendor.js:10415:60 [angular]
createComponent@file:///app/vendor.js:10615:68 [angular]
activateOnGoForward@file:///app/vendor.js:48567:70 [angular]
activateWith@file:///app/vendor.js:48553:37 [angular]
placeComponentIntoOutlet@file:///app/vendor.js:23184:28 [angular]
activateRoutes@file:///app/vendor.js:23165:50 [angular]
file:///app/vendor.js:23101:72 [angular]
forEach@[native code] [angular]
activateChildRoutes@file:///app/vendor.js:23101:36 [angular]
activate@file:///app/vendor.js:23075:33 [angular]
file:///app/vendor.js:22692:30 [angular]
file:///app/vendor.js:230:25 [angular]
...

1 个答案:

答案 0 :(得分:4)

您尝试使用的XML模板是PAN( P lain A wesome N ativeScript)文件,而不是NAN( N ativeScript AN gular)文件。

这实际上非常重要,理解,有些东西只在PAN中工作,有些东西只在NAN工作。它们的编写非常相似,但有几个关键的区别......

例如,在PAN中,它被标记为.XML文件,在NAN中,它通常被标记为HTML文件。在PAN中,您有 Page 标记,在NAN中,您通常会跳过 Page 标记并使用路由器标记。在PAN中,您的所有标签都可以选择自动关闭。在NAN中,所有标签最好不要自封闭。

在PAN中,所有事件都被视为xml文件中的任何其他属性;即tap="goback"。与label="hi"相同在南方,该点按事件应写为(tap)="goback()"

这些只是差异中的一小部分,还有许多其他因素使得这两种格式在不对屏幕进行更改的情况下彼此不兼容。

因为看起来你正在尝试学习NAN,我建议你结帐 https://github.com/NativeScript/sample-Groceries/示例应用程序。这个APP完全用NAN编写。

此外,http://docs.nativescript.org包含PAN和NAN应用的完整文档。