Я клонировал stencil-component-starter из:
https://github.com/ionic-team/stencil-component-starter
Затем в файле: my-component.tsx У меня есть следующий код:
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() last: string;
@Prop() minHeartRate: number;
@Prop() maxHeartRate: number;
render() {
return (
<div>
Athlete: {this.first} {this.last} - Heart Rate Range:
<ion-range mode="ios" dualKnobs={true} min={0} max={200} step={2} pin={true} snaps={true} value={{lower: this.minHeartRate, upper: this.maxHeartRate}}>
<ion-label range-left>0</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</div>
);
}
}
какВы можете увидеть здесь:
https://github.com/napolev/stencil-ion-range/blob/master/src/components/my-component/my-component.tsx
[До того] Он корректно обрабатывался почти с двумя проблемами 1 and 2: [Сейчас] Он вообще не рендерится.Итак, есть три проблемы 1, 2 and 3:
Теги <ion-label/> игнорируются.
Каждая ручка может выходить за пределы другойручка (пожалуйста, игнорируйте это, я думаю, это специально для новой версии).
Это новая проблема, которую я только что обнаружил (Current time: 2018-08-26 19:20).Как и 12 часов назад (проверьте отметку времени в репо), репозиторий: https://github.com/napolev/stencil-ion-range/ при коммите 12c14b75cca92f19af6c5ccae60091319578cec7 генерировал почти должным образом тег <ion-range/> выше, за исключением проблем 1 и 2 (проверьте изображениениже).Но теперь, после чистой установки этого репозитория, он больше не отображает то, что вы видите на изображении ниже.Это странноПосле выполнения этого коммита я проверил, что после чистой установки он рендерит.
Вот что он рендерил раньше, что он больше не рендерится:
Ссылка:
https://ionicframework.com/docs/api/components/range/Range/
Есть идеи, как решить эту проблему?
Спасибо!
[EDIT 1]
Это ответ на комментарий Аарона Сандерса ниже:
ion-labelкомпонент внутри stencil-component-starter не обрабатывается
Аарон, я добавил предложенный вами код, как вы можете видеть здесь:
https://github.com/napolev/stencil-ion-range/commit/d3471825131d3d329901c73d8c6803a609b27c3b#diff-34c2a6c626ee2612cd4f12b2c004a0b1L16
, нопри запуске кода с помощью: $ npm start вот что визуализируется:
правильно ли вы визуализировали компонент?
Я удалил каталог node_modules и снова установил их безуспешно.
Не могли бы вы попробовать мой репозиторий?
, как вы видите, я сделал всего 2 коммитаповерх официальных коммитов:
https://github.com/napolev/stencil-ion-range/commits/master
На всякий случай вот версии, которые я использую для основных инструментов:
$ node -v
v8.11.2
$ npm -v
6.1.0
$ ionic -v
ionic CLI 4.1.1
[РЕДАКТИРОВАТЬ 2]
Параллельно обсуждается эта тема:
https://forum.ionicframework.com/t/ion-label-component-inside-the-stencil-component-starter-not-getting-rendered/139763
[РЕДАКТИРОВАТЬ 3]
Это ответ на комментарий от Александра Старосельского ниже:
компонент ионной метки внутри шаблона трафарета-компонента не запускается
Александр, я попробовал ваше предложение со следующими изменениями:
https://github.com/napolev/stencil-ion-range/commit/68fce2abe25536b657f9493beb1cc56e26828e4f
Теперь компонент <ion-range/> визуализируется (это действительно хорошо), но есть некоторая проблема срендеринг, как вы можете видеть на следующем изображении.Компоненты <ion-label/> имеют большую ширину.
Есть идеи о том, как решить эту проблему?
Спасибо!
[РЕДАКТИРОВАТЬ 4]
Добавление предложения от Аарон Сондерс добивается цели:
<ion-item>
<ion-range
mode="ios"
dualKnobs={true}
min={0} max={200} step={2}
pin={true} snaps={true}
value={{ lower: this.minHeartRate, upper: this.maxHeartRate }}
>
<ion-label slot="start" style={{flex: 'none', margin: '0 30px 0 0'}}>0</ion-label>
<ion-label slot="end" style={{flex: 'none', padding:' 0 0 0 30px'}}>200</ion-label>
</ion-range>
</ion-item>
Благодаря АлександруСтаросельский и Аарон Сондерс потому что, объединив их предложения, я смог бы получить эту работу.