模具组件启动器中的离子标签组件未渲染

时间：2018-08-26 07:36:37

标签： typescript ionic-framework stenciljs

我从以下位置克隆了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：

  1. <ion-label/>标签将被忽略。

  2. 每个旋钮都可以移到另一个旋钮之外（请忽略此设置，我认为这是新版本上的专用设置。）

  3. 这是我刚刚检测到的(Current time: 2018-08-26 19:20)新问题。像12个小时前（检查仓库中的时间戳记）一样，存储库：https://github.com/napolev/stencil-ion-range/在提交12c14b75cca92f19af6c5ccae60091319578cec7时正确地生成了上面的<ion-range/>标签，几乎是几乎，问题1和2（请参见下面的图像）。但是现在，在全新安装此存储库之后，它不再呈现您在下面的图像中看到的内容。真奇怪完成该提交后，我检查了它的安装是否正确。

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

enter image description here

参考：

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

关于如何解决此问题的任何想法？

谢谢！

[编辑1]

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

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

亚伦，我添加了您建议的代码，如下所示：

https://github.com/napolev/stencil-ion-range/commit/d3471825131d3d329901c73d8c6803a609b27c3b#diff-34c2a6c626ee2612cd4f12b2c004a0b1L16

但是使用以下代码运行代码：$ npm start时，将呈现以下内容：

enter image description here

您是否正确渲染了组件？

我删除了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 的评论的回应：

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

亚历山大，我通过以下更改尝试了您的建议：

https://github.com/napolev/stencil-ion-range/commit/68fce2abe25536b657f9493beb1cc56e26828e4f

现在<ion-range/>组件已被渲染（这确实很好），但是在渲染上存在一些问题，如下图所示。 <ion-label/>组件的宽度很大。

enter image description here

关于如何解决此问题的任何想法？

谢谢！

[编辑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>

感谢亚历山大·斯塔索塞尔斯基和亚伦·桑德斯，因为结合他们的建议，我可以完成这项工作。

2 个答案:

答案 0 :(得分：1)

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

由于模具使用离子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>

enter image description here

答案 1 :(得分：1)

您需要在stencil-component-starter组件中显式import '@ionic/core';或将CDN scripts/styles添加到index.html中。我记得在某个时候，工具包或stencil-app-starter专门将其导入具有早期版本的@ ionic / core beta甚至是alpha的根元素。

此外，对于每个documentation，您还需要将ion-range用ion-item包装，以及使用slot="start"和slot="end"而不是{{1 }}和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> ); } } 元素的位置肯定存在问题。肯定需要对样式进行一些调整，包括伸缩增长/收缩/基础以及端槽元素的位置/边距。最好在@ ionic / core github上提交样式问题。

希望有帮助！

相关问题
最新问题