如何更改离子4中弹出窗口中按钮文本的颜色

Question

我正在尝试在用户从弹出窗口中进行选择时更改按钮上的文本颜色，以便当用户再次打开弹出窗口时，先前的选择会突出显示...它用于过滤器列表，用户选择过滤器值 desc 或 asc 或按名称等。

在我的 html 文件中我有 3 个按钮：

<ion-button class="btn1" (click)="sortList('Desc', 'secondary')" fill="clear" [color]="(colorSelect==='secondary')"? 'secondary':'tertiary'">Desc</ion-button>
<ion-button class="btn2" (click)="sortList('Desc', 'secondary')" fill="clear" [color]="(colorSelect==='secondary')"? 'secondary':'tertiary'">Desc</ion-button>
<ion-button class="btn3" (click)="sortList('Desc', 'secondary')" fill="clear" [color]="(colorSelect==='secondary')"? 'secondary':'tertiary'">Desc</ion-button>

在我的组件文件中：

colorSelect: string = '';

public sortList(sortType, item: string){
    this.popoverController.dismiss(sortType);
    this.colorSelect = item;
}

弹出窗口关闭后，您如何保持该项目处于选中状态，以便再次打开弹出窗口时，该项目会突出显示？

Answer 1

由于 popover 使用的组件在 popover 关闭后会被销毁，因此您需要利用 popover 组件可以导入并用作按钮颜色真实来源的服务。

非常粗略： https://stackblitz.com/edit/ionic-angular-v5-xfe357

高级别：

service.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SharedService {

  public filters;

  constructor() {
    this.filters = ["secondary","secondary","secondary"]
  }

}

popover.ts:

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { SharedService } from './shared.service';

@Component({
  selector: 'hello',
  template: `<h1>Hello!</h1>
  <ion-list>
      <ion-button class="btn1" (click)="sortList(0, 'Desc', 'secondary')" fill="clear" [color]="sharedService.filters[0]">Desc</ion-button>
      <ion-button class="btn2" (click)="sortList(1, 'Desc', 'secondary')" fill="clear" [color]="sharedService.filters[1]">Desc</ion-button>
      <ion-button class="btn3" (click)="sortList(2, 'Desc', 'secondary')" fill="clear" [color]="sharedService.filters[2]">Desc</ion-button>
  </ion-list>
  `
})
export class HelloComponent  {

  constructor(private sharedService: SharedService, private popoverController: PopoverController) {

  }

  sortList(buttonIndex, sortType, item: string){
    if (this.sharedService.filters[buttonIndex]==="secondary") {
      this.sharedService.filters[buttonIndex]="tertiary";
    } else {
      this.sharedService.filters[buttonIndex]="secondary";
    }
    this.popoverController.dismiss(sortType);
  } 
}

因此，您调用 popover 的主要组件也应该导入此类服务（并注入它）并利用来自它的数据作为单一的真实来源。

如何更改离子4中弹出窗口中按钮文本的颜色

How to change color of button text in popover in ionic 4

ionic4