在ionic中包含内容的工具栏

Question

我在页面上有一个工具栏。单击工具栏中的项目，我将在同一页上显示内容。Ionics中的工具栏如何显示内容？

<ion-toolbar no-border-top>
<ion-segment>
  <ion-segment-button value="input">
    title1
  </ion-segment-button>
  <ion-segment-button value="output">
    title2
  </ion-segment-button>
  <ion-segment-button value="internal">
     title3
  </ion-segment-button>
  <ion-segment-button value="external">
    title4
  </ion-segment-button>
</ion-segment>

​

Answer 1

可以使用离子段按钮的单击事件，如下所示

<ion-toolbar no-border-top>
<ion-segment>
  <ion-segment-button value="input" (click)="alterContent()">
    title1
  </ion-segment-button>
  <ion-segment-button value="output">
    title2
  </ion-segment-button>
  <ion-segment-button value="internal">
    title3
  </ion-segment-button>
  <ion-segment-button value="external">
    title4
  </ion-segment-button>
</ion-segment>

在ts文件中

alterContent(){
  this.content = "anotherContent";
}

内容显示在页面的内容区域中，如下所示

<ion-content>
  {{content}}
</ion-content>

但是，当您想要更改页面的完整内容时，有一些选项卡可以将其存档。详情请参见Ionic Docs。