nova-live/projects/live-app/src/app/components/appraise/appraise.component.html

<ion-modal
  #modal
  trigger="open-modal"
  [isOpen]="liveService.isOpenEvaluate"
  (didDismiss)="liveService.isOpenEvaluate = false"
  [backdropDismiss]="false"
>
  <ng-template>
    <div class="modal-content">
      <div class="title">评价</div>
      <ion-segment
        [scrollable]="true"
        (ionChange)="segmentChanged($event)"
        layout="icon-bottom"
        value="positiveTags"
        mode="md"
      >
        <ion-segment-button
          value="positiveTags"
          class="tabs"
          content-id="positiveTags"
        >
          <ion-label>喜欢</ion-label>
        </ion-segment-button>
        <ion-segment-button
          value="negativeTags"
          class="tabs"
          content-id="negativeTags"
        >
          <ion-label>无感</ion-label>
        </ion-segment-button>
      </ion-segment>
      <div class="list">
        @for (tag of list; track $index) {
        <span
          (click)="onCheck(tag)"
          [ngClass]="{
          'action': checkTags.has(tag),
        }"
          >{{ tag }}</span
        >
        }
      </div>
    </div>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button (click)="liveService.isOpenEvaluate = false"
          >取消</ion-button
        >
      </ion-buttons>
      <ion-buttons slot="end">
        <ion-button (click)="confirm()">确认</ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ng-template>
</ion-modal>