【发布时间】：2018-08-26 07:36:36
【问题描述】：
我从以下位置克隆了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>
);
}
}
如您所见：
[之前]它正在几乎正确渲染，有两个问题1 and 2：
[现在]它没有得到完全呈现。所以，有三个问题1, 2 and 3：
<ion-label/>标签被忽略。每个旋钮都可以移动到另一个旋钮之外（请忽略这一点，我认为这是新版本的故意）。
这是我刚刚检测到
(Current time: 2018-08-26 19:20)的一个新问题。就像 12 小时前（检查 repo 上的时间戳）存储库：https://github.com/napolev/stencil-ion-range/ on commit12c14b75cca92f19af6c5ccae60091319578cec7正在生成 几乎 上面的<ion-range/>标签，除了问题 1 和 2（检查下图） .但是现在在干净安装此存储库之后，它不再呈现您在下图中看到的内容。这很奇怪。完成该提交后，我检查了它是否在全新安装后呈现。
这是它之前渲染的内容，现在不再渲染：
参考：
https://ionicframework.com/docs/api/components/range/Range/
关于如何解决这个问题的任何想法？
谢谢！
[编辑 1]
这是对以下 Aaron Saunders 评论的回应：
ion-label component inside the stencil-component-starter not getting rendered
Aaron，我添加了您建议的代码，您可以在此处看到：
但是当使用$ 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]
关于这个话题有一个平行的讨论：
[编辑 3]
这是对以下 Alexander Staroselsky 评论的回应：
ion-label component inside the stencil-component-starter not getting rendered
Alexander，我尝试了您的建议并进行了以下更改：
https://github.com/napolev/stencil-ion-range/commit/68fce2abe25536b657f9493beb1cc56e26828e4f
现在<ion-range/> 组件被渲染（这非常好），但渲染时出现了一些问题，如下图所示。 <ion-label/> 组件的宽度很大。
知道如何解决这个问题吗？
谢谢！
[编辑 4]
添加 Aaron Saunders 的建议可以解决问题：
<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>
感谢 Alexander Staroselsky 和 Aaron Saunders，因为结合他们的建议，我可以完成这项工作。
【问题讨论】：
-
你要么导入'@ionic/core'；在您的 stencil-component-starter 组件中或使用在您的
index.html中包含 CDN @ionic/core 资产？创建一个新的 stencil-component-starter 项目并导入/链接任何一个都允许使用和导出元素。肯定存在样式不一致，但这是与测试版相关的完全不同的问题。我不想正式回答，除非这显然解决了在启动项目中使用@ionic/core 组件的基本问题。
标签： typescript ionic-framework stenciljs