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

时间:2019-05-01 20:58:53

标签: nativescript angular2-nativescript nativescript-angular nativescript-plugin

我在我的Nativescript Angular应用中使用了效果很好的nativescript-google-maps-sdk插件。

我的问题是我想使用缓存的图像在自定义InfoWindow中显示。为此,我在整个应用中使用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>标签就可以正常工作。

任何指针都将受到高度赞赏!

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

  1. 在Angular中注册的所有内容中都不可用;因此,如果您必须创建一个核心模板;您还必须将xmlns:blah="ns-blah"作为核心模板的一部分传递,以便将其正确注册到该核心模板中。角registerElement对Core无效。现在,您可以轻松执行<IC:WebImage xmlns:IC="nativescript-web-image-cache" ...>,然后它在模板中有效。但是,我建议您将xmlns:IC放在最上面的元素上。因为它使阅读代码变得更加简单。但是,如果您在商品周围没有父包装元素,那么这是使用该商品将其注册在同一商品上的有效代码。

  2. NS-Core模板与NS-Angular模板不同;如果您尝试使用<IC:WebImage [param]="value" (param)="value"/>[param]这样的在Angular中可用的功能,那么(param)param都将完全破坏模板解析。 NS-Core的解析器就像HTML,value周围不应包含任何内容,value应该用引号引起来。 {{ boundvalue }}可以具有<Page>来将动态值绑定到模板中。

  3. 通常,将NS-Core模板传递到所需的任何功能时;您只想传递最小的部分;您很少需要使用<Frame><StackLayout xmlns:IC=...><IC:WebImage...></StackLayout>或其他任何顶级元素。实际上,这可能会引起问题。通常,您只需要查看一部分布局即可。因此,在这种情况下,.carousel .car-rtn { z-index: 200; width: 10%; }

  4. 最后,在使用Angular中的Core功能进行故障排除时;我强烈建议您在每个元素上放置固定的Width / Height和Background颜色。有时这可以向您显示失败的原因。