Используйте плагин Nativescript Core в проекте Nativescript Angular

Я использую в своем приложении Nativescript Angular плагин nativescript-google-maps-sdk, который отлично работает.

Моя проблема в том, что я хочу использовать кэшированные изображения для отображения в настраиваемом InfoWindow. Для этой цели я использую плагин nativescript-web-image-cache для всего приложения. Когда я использую обычный тег <WebImage> в информационном окне, он жалуется, что это не зарегистрированный компонент:

Модуль 'ui / web-image' не найден для элемента 'WebImage'

В остальном приложении он работает нормально. В этой проблеме предлагается следующее:

что содержимое InfoWindowTemplate анализируется как Vanilla NativeScript XML, а не как Angular XML, поэтому он не может найти созданный вами пользовательский компонент Angular

Итак, вопрос в том, как я могу по-прежнему использовать этот плагин? Есть ли способ зарегистрировать компонент <WebImage>, чтобы он работал в настраиваемом InfoWindow?

Чтобы убедиться, что нет другой проблемы, я добавил плагин nativescript-web-image-cache в простой демонстрационный проект NativesScript nativescript-google-maps-sdk, и тогда тег <WebImage> работает нормально.

Любые указатели приветствуются!


comment
Вы пытались передать xmlns:IC="nativescript-web-image-cache" в корневом элементе, а вместо <WebImage> попробуйте <IC:WebImage>, по крайней мере, так вы регистрировали бы элементы в Vanilla NativeScript, поэтому он должен работать.   -  person Manoj    schedule 02.05.2019
comment
@manoj на самом деле я попытался добавить элемент Page и добавить к нему xmlns. Он не жалуется на то, что модуль больше не найден, но и не отображается ...   -  person Joni    schedule 02.05.2019
comment
Вы не должны добавлять Page, это можно добавить только внутри Frame, используйте вместо этого макет.   -  person Manoj    schedule 02.05.2019
comment
@Manoj: ну, ты (и Натан в слабости) действительно были правы. Избегайте элемента Page, и у меня возникла проблема со скобками, но он заработал. Большое спасибо!   -  person Joni    schedule 02.05.2019


Ответы (2)


  1. Все, что зарегистрировано в Angular, недоступно в Core таким же образом; поэтому, если вам нужно создать основной шаблон; вы также должны передать xmlns:blah="ns-blah" как часть основного шаблона, чтобы он был правильно зарегистрирован в этом основном шаблоне. Angular registerElement ничего не делает для Core. Теперь вы можете легко сделать <IC:WebImage xmlns:IC="nativescript-web-image-cache" ...>, и тогда это действительно в шаблоне. Однако я бы порекомендовал вам поместить xmlns:IC в самый верхний элемент, который вы можете; так как это значительно упрощает чтение кода. Но в случаях, когда у вас нет родительского элемента обертывания вокруг элемента, это допустимый код для его регистрации в том же элементе, который его использует.

  2. Шаблоны NS-Core отличаются от шаблонов NS-Angular; если вы попытаетесь использовать то, что работает в Angular, например <IC:WebImage [param]="value" (param)="value"/>, и [param], и (param) полностью нарушат синтаксический анализ шаблона в ядре. Парсер NS-Core похож на HTML, ничего не должно окружать param, а value должен быть в кавычках. value может иметь {{ boundvalue }} для привязки динамического значения к шаблону.

  3. Обычно при передаче шаблона NS-Core в любую нужную вам функцию; вы хотите передать только минимальные части; вам редко нужно использовать такие вещи, как <Page>, <Frame> или любые другие элементы верхнего уровня. На самом деле это может вызвать проблемы. Обычно вам нужен только тот фрагмент макета, который вы собираетесь просмотреть. Итак, в данном случае <StackLayout xmlns:IC=...><IC:WebImage...></StackLayout>

  4. Наконец, при устранении неполадок с использованием основных функций в Angular; Я настоятельно рекомендую вам установить фиксированные цвета ширины / высоты и фона для каждого элемента. Иногда это может показать вам, что не так.

person Nathanael    schedule 01.05.2019

Поскольку содержимое InfoWindowTemplate анализируется как Vanilla NativeScript XML, вы можете добавить xmlns:IC="nativescript-web-image-cache" к корневому / родительскому элементу вашего компонента. Также используйте <IC:WebImage> вместо WebImage.

person Manoj    schedule 01.05.2019