ionic2/ionic3 ion-item内部不渲染div或者span以及其他元素

ionic2/ionic3  ion-item内部不渲染div或者span以及其他元素，可以说是任何自定义的html元素

只识别<ion-label>

但是如下结构

<ion-input type="number"  placeholder="请输入最小值"></ion-input>
    <ion-label>至</ion-label>
    <ion-input type="number" placeholder="请输入最大值"></ion-input>
</ion-item>

你猜怎么着，中间的label元素渲染后居然跑到第一个去了，崩溃。。。。

其他的结构

<ion-input type="number"  placeholder="请输入最小值"></ion-input>
    <span>至</span>
    <div>至</div>
    <ion-input type="number" placeholder="请输入最大值"></ion-input>
</ion-item>

中间俩元素直接不渲染，查看渲染后的网页，这俩直接就没有，蹦。。。。

最后参考了，大神们的博客，根本原因如下：https://stackoverflow.com/questions/44448237/ionic-2-cannot-view-span-inside-of-ion-item-how-to-render-simple-text

That's because of how content projection works, the ion-item will only render some components (like the ion-label and the ion-input) but will ignore some other html elements.

解决方法有2种：

1. 用ionic组件<ion-note>

2. 给元素加上item-start, item-end, item-left, item-right or item-content 这些属性， 我就用的这个方法：<span item-content class="inline-edit">至</span>问题解决。

以下是stackoverflow大神的解答：

https://stackoverflow.com/questions/44448237/ionic-2-cannot-view-span-inside-of-ion-item-how-to-render-simple-text

 

其他说明：

Attribute       Description
item-start      Placed to the left of all other elements, outside of the inner item.
item-end        Placed to the right of all other elements, inside of the inner item, outside of the input wrapper.
item-content    Placed to the right of any ion-label, inside of the input wrapper.

另外，ionic4官网也有

<ion-note>Default Note</ion-note>

说明，之前的V3没有这个说明，https://ionicframework.com/docs/api/note