离子怪异的间距

Question

当我使用以下代码显示标题时，标题会产生奇怪的左/右样式。

有人知道它有什么问题吗？谢谢！

<ion-header-bar>
    <h1 class="title">BLE Demo</h1>
    <button class="button button-positive">
        {{connectStatus == false ? "Connect" : "Disconnect" }}
    </button>
</ion-header-bar>

如果我将行{{connectStatus == false ? "Connect" : "Disconnect" }}更改为{{connectStatus}}，那么样式就会消失。

更新：查看@Microsmsm制作的示例代码：http://codepen.io/Microsmsm/pen/ZQZyVp

Answer 1

您可以使用代码as that。 你改变了

{{connectStatus == false ? "Connect" : "Disconnect" }}

到

{{connectStatus == true ? "Connect" : "Disconnect" }}

完成效果

Answer 2

我通过遵循标准的空白模板解决了这个问题。使用ion-nav-bar，而不是自己指定h1元素。

显然，离子尝试通过向元素添加左/右样式来居中标题，具体取决于其他元素（本例中的按钮）向左/右的宽度。但计算方式非常奇怪，不依赖于实际显示的内容量，而是模板脚本的长度。

因此，在这种情况下，{{connectStatus == false ? "Connect" : "Disconnect" }}比{{connectStatus}}长得多，而离子为前者提供了333px左右，而对于后者则为124px。即使显示的文本量没有太大差异。

不确定是否有办法解决此问题。我暂时会坚持使用离子导航棒。