stencil-component-starter 中的 ion-label 组件没有被渲染

Question

我从以下位置克隆了 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 小时前（检查 repo 上的时间戳）存储库：https://github.com/napolev/stencil-ion-range/ on commit 12c14b75cca92f19af6c5ccae60091319578cec7 正确地生成 almost 上面的 <ion-range/> 标签，除了问题 1 和 2（检查下图）。但是现在，在全新安装此存储库后，它不再呈现您在下图中看到的内容。这很奇怪。完成该提交后，我检查了它在全新安装后呈现的情况。

这是它之前渲染的内容，它不再渲染了：

参考：

https://ionicframework.com/docs/api/components/range/Range/

知道如何解决这个问题吗？

谢谢！

[编辑 1]

这是对下面 Aaron Saunders 的评论的回应：

亚伦，我添加了您建议的代码，您可以在此处看到：

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]

这是对下面 Alexander Staroselsky 的评论的回应：

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 因为结合他们的建议我可以完成这项工作。

Answer 1

基于最新的 4.0 测试版...我仍然认为默认情况下标签的样式存在错误，但这是一种解决方法

参考文档，因为模板使用 ionic v4 - https://beta.ionicframework.com/docs/api/range

<ion-range mode="ios" 
           dualKnobs={true} 
           min={0} max={200} 
           step={2} pin={true} 
           snaps={true} 
           value={{lower: 89, upper: 150}}>
   <ion-label slot="start" style={{flex: 'none',padding:'10px'}}>0</ion-label>
   <ion-label slot="end" style={{flex: 'none',padding:'10px'}}>200</ion-label>
</ion-range>

Answer 2

您需要在 stencil-component-starter component or add CDN scripts/styles 中明确 import '@ionic/core'; 到 index.html。我记得有一次，工具包或 stencil-app-starter 专门在根元素中导入了早期版本的 @ionic/core beta 甚至是 alpha.

此外，根据 documentation，您还需要用 ion-item 包装 ion-range 以及使用 slot="start" 和 slot="end" 而不是 range-left 和 range-right.

import { Component, Prop } from '@stencil/core';
import '@ionic/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-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">0</ion-label>
            <ion-label slot="end">200</ion-label>
          </ion-range>
        </ion-item>
      </div>
    );
  }
}

这将有助于确保注入样式并正确呈现组件。平心而论，当我尝试这样做时，大部分样式都通过了，但是开槽 ion-label 元素的定位肯定存在问题。肯定需要对样式进行一些调整，包括 flex grow/shrink/basis 以及结束插槽元素的 positioning/margin。也可以在@ionic/core github 提交样式问题。

希望对您有所帮助！

stencil-component-starter 中的 ion-label 组件没有被渲染

ion-label component inside the stencil-component-starter not getting rendered

typescript

ionic-framework

stenciljs