在Nativescript Angular项目中使用Nativescript Core插件

问题描述 投票:0回答:2

我在我的Nativescript Angular应用程序中使用的nativescript-google-maps-sdk插件非常有用。

我的问题是我想使用缓存的图像显示在自定义的InfoWindow中。为此,我使用app范围内的nativescript-web-image-cache插件。当我在infoWindow中使用常规<WebImage>标记时,它会抱怨它不是注册组件:

元素'WebImage'找不到模块'ui / web-image'

应用程序中的其他任何地方都可以正常工作。在这个issue它建议:

InfoWindowTemplate内容被解析为Vanilla NativeScript XML,而不是Angular XML,因此它无法找到您创建的自定义Angular组件

所以问题是我怎么还能使用这个插件?有没有办法我可以以某种方式注册<WebImage>组件,以便它可以在自定义InfoWindow中工作?

为了确保没有其他问题,我将nativescript-web-image-cache插件添加到简单的NativesScript nativescript-google-maps-sdk演示项目中,然后<WebImage>标签工作得很好。

任何指针都非常感谢!

nativescript angular2-nativescript nativescript-angular nativescript-plugin
2个回答
1
投票
  1. 在Angular中注册的任何内容在Core中都没有相同的方式;所以如果你必须创建一个核心模板;您还必须将xmlns:blah="ns-blah"作为核心模板的一部分传递,以便在该核心模板中正确注册。角度registerElement对Core没有任何作用。现在您可以轻松地执行<IC:WebImage xmlns:IC="nativescript-web-image-cache" ...>,然后它在模板中有效。但是,我建议你把xmlns:IC放在最顶层的元素上;因为它使得阅读代码变得更加简单。但是如果项目周围没有父包装元素,则这是使用它在同一元素上注册它的有效代码。
  2. NS-Core模板与NS-Angular模板不同;如果你试图使用像Qazxswpoi这样在Angular中工作的东西,那么<IC:WebImage [param]="value" (param)="value"/>[param]将完全打破核心中的模板解析。 NS-Core的解析器就像HTML一样,没有任何东西可以围绕(param),而param应该在引号中。 value可以使用value将动态值绑定到模板中。
  3. 通常将NS-Core模板传递给您需要的任何功能;你想传递最小的部分;你很少需要使用像{{ boundvalue }}<Page>或任何其他顶级元素的东西。实际上这可能会导致问题。您通常只需要要查看的布局部分。所以在这种情况下<Frame>
  4. 最后使用Angular中的Core功能进行故障排除时;我强烈建议您在每个元素上添加固定的宽度/高度和背景颜色。这有时可以告诉你什么是失败的。

1
投票

由于InfoWindowTemplate内容被解析为Vanilla NativeScript XML,您可以将<StackLayout xmlns:IC=...><IC:WebImage...></StackLayout>添加到组件的根/父元素。也使用xmlns:IC="nativescript-web-image-cache"而不是<IC:WebImage>

© www.soinside.com 2019 - 2024. All rights reserved.