时间戳

首页 > 解决方案 > 主页中的控制组件（Angular/Ionic）

angular - 主页中的控制组件（Angular/Ionic）

问题描述

我还是 Web 应用程序开发的新手，所以请多多包涵。

我正在使用 Ion-Segment 模块（https://ionicframework.com/docs/api/segment），这里看起来像

<ion-segment value="1" (ionChange)="segmentChanged($event)">
      <ion-segment-button disabled value="floor">
        <ion-label>Floor</ion-label>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-label>1</ion-label>
      </ion-segment-button>
      <ion-segment-button value="2">
        <ion-label>2</ion-label>
      </ion-segment-button>
      <ion-segment-button value="3">
        <ion-label>3</ion-label>
      </ion-segment-button>
      <ion-segment-button value="4">
        <ion-label>4</ion-label>
      </ion-segment-button>
      <ion-segment-button value="5">
        <ion-label>5</ion-label>
      </ion-segment-button>
      <ion-segment-button value="6">
        <ion-label>6</ion-label>
      </ion-segment-button>
      <ion-segment-button value="7">
        <ion-label>7</ion-label>
      </ion-segment-button>
      <ion-segment-button value="8">
        <ion-label>8</ion-label>
      </ion-segment-button>
      <ion-segment-button value="9">
        <ion-label>9</ion-label>
      </ion-segment-button>
    </ion-segment>

在此处输入图像描述

该段完成其工作，填充一个变量（例如 Floor）但是，还有另一个函数可能会更改 Floor 变量，因此所选的 Ion-Segment 不会相应地更改。

如何控制或更改 Home.page.ts 中的选定段？

标签： angularionic-framework

解决方案

  • 首先：您需要在 ion-segment 元素中绑定属性 [value]="floor"。
  • 第二：你需要创建一个服务有一个属性 floor$ 是一个主题或者behaviourSubject。在 ion-segment 的父组件中，您需要订阅 floor$ 并更改变量 floor。在其他要控制分段的地方，您只需注入服务，然后为 floor$ 设置一个新值

推荐阅读