在Nativescript Angular项目中使用Nativescript Core插件 [英] Use Nativescript Core plugin in Nativescript Angular project

问题描述

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

I am using in my Nativescript Angular app the nativescript-google-maps-sdk plugin which works great.

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

My issue is that I want to use cached images to display in a custom InfoWindow. For this purpose I am using the nativescript-web-image-cache plugin app-wide. When I use the regular <WebImage> tag in the infoWindow it complains that it is not a registered component:

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

Module 'ui/web-image' not found for element 'WebImage'

在应用程序中的其他任何地方都可以正常工作.在此问题中，建议:

Everywhere else in the app it works just fine. In this issue is it suggested that:

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

that InfoWindowTemplate content is parsed as Vanilla NativeScript XML, not as Angular XML thus it is not able to find custom Angular Component you created

所以问题是我怎么仍然可以使用这个插件?有什么方法可以注册<WebImage>组件，使其可以在自定义InfoWindow中使用?

So the question is how can I still use this plugin? Is there a way I can somehow register the <WebImage> component so it will work in the custom InfoWindow?

为了确保没有其他问题，我将nativescript-web-image-cache插件添加到纯NativesScript nativescript-google-maps-sdk演示项目中，然后<WebImage>标记正常工作.

Just to make sure there is not another issue, I added the nativescript-web-image-cache plugin to the plain NativesScript nativescript-google-maps-sdk demo project and then the <WebImage> tag works just fine.

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

Any pointers are highly appreciated!

推荐答案

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

1. Anything registered in Angular is not available in Core the same way; so if you have to create a core template; you must also pass in the xmlns:blah="ns-blah" as part of the core template, so that it is registered properly in that core template. The angular registerElement does not do anything for Core. Now you can easily do <IC:WebImage xmlns:IC="nativescript-web-image-cache" ...> and then it is valid in the template. However, I would recommend you put the xmlns:IC on the topmost element you can; as it makes reading the code a lot simpler. But in cases you don't have a parent wrapping element around the item, this is valid code to register it on the same element using it.

NS-Core模板与NS-Angular模板不同；如果您尝试使用像<IC:WebImage [param]="value" (param)="value"/>这样在Angular中可用的功能，则[param]和(param)都将完全破坏内核中的模板解析. NS-Core的解析器就像HTML一样，不应在param周围加上任何内容，并且value应该用引号引起来. value可以具有{{ boundvalue }}来将动态值绑定到模板中.

NS-Core templates are different than NS-Angular templates; if you attempt to use things that work in Angular like <IC:WebImage [param]="value" (param)="value"/> both the [param] and (param) will totally break template parsing in core. NS-Core's parser is like HTML, nothing is supposed to surround the param and the value should be in quotes. The value can have {{ boundvalue }} to bind a dynamic value into the template.

通常，在将NS-Core模板传递给您需要的任何功能时；您只想传递最小的部分；您很少需要使用<Page>，<Frame>或其他任何顶级元素.实际上，这可能会引起问题.通常，您只需要查看一部分布局即可.所以在这种情况下<StackLayout xmlns:IC=...><IC:WebImage...></StackLayout>

Normally when passing a NS-Core template into whatever function you need; you want to pass in just the minimal parts; you rarely need to use things like <Page>, <Frame> or any other top level elements. In fact this can cause problems. You normally need just the piece of the layout you are going to have it view. So in this case <StackLayout xmlns:IC=...><IC:WebImage...></StackLayout>

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

Finally when troubleshooting using Core features in Angular; I highly recommend you put fixed Width/Height and Background colors on each element. This can sometimes show you what is failing.

这篇关于在Nativescript Angular项目中使用Nativescript Core插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！