正确/最简单的形式：在离子2中添加离子图标按钮到导航栏

Question

我正在离子图标按钮添加到离子导航栏中的离子2应用程序。

它工作正常，但此解决方案似乎相当冗长。

我想确认这是正确的/最简单的一种表格/最佳实践方法：

<ion-navbar> 
 
    <ion-title>Books</ion-title> 
 

 
    <ion-buttons end> 
 
    <button ion-button icon-only [navPush]="bookEditPage"> 
 
     <ion-icon name="add" color="navigation"></ion-icon> 
 
     </button> 
 
    </ion-buttons> 
 
</ion-navbar>

Answer 1

我想确认这是 正确/最简单形式/最佳实践方法。

这是完美:)

它可能看起来有点冗长，但代码的每个部分都有它的目的。 <ion-buttons end>...</ion-buttons>将充当容器，将按钮放置在正确的位置。

在这种情况下，你使用end，正如你可以看到this answer：

start和end遵循UI模式为平台

所以<ion-buttons start>将是对左侧的iOS并成为android右侧第一个 按钮。

<ion-buttons end>将在ios上的最后一个按钮和 右侧为Android。

left/right提供作为一种方式来超越。

然后该容器内，你只需要放置该按钮，在这种情况下，里面的图标：

<button ion-button icon-only [navPush]="bookEditPage"> 
    <ion-icon name="add" color="navigation"></ion-icon> 
</button>