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。

离子内容的工具栏

1 个答案: