Как изменить цвет текста в Aurelia Dialog?

Question

У меня есть диалог, как вы можете видеть здесь:

<template>
  <ux-dialog>
    <ux-dialog-body>
      <h2 t="luminaires.list.enter-serialnumber">Bitte geben Sie eine neue Seriennummer ein</h2>
      <input value.bind="serialNumber" />
    </ux-dialog-body>

    <ux-dialog-footer>
      <button click.trigger="controller.cancel()" t="luminaires.list.cancel">Abbrechen</button>
      <button click.trigger="controller.ok(serialNumber)" t="luminaires.list.ok">Ok</button>
    </ux-dialog-footer>
  </ux-dialog>
</template>

и связанная модель представления:

import {DialogController} from "aurelia-dialog";
import {Controller} from "aurelia-templating";

export class SerialnumberDialog {
  private static inject = [DialogController];
  private serialNumber: string;
  private controller: any;
  constructor(controller: Controller) {
    this.controller = controller;
  }
}

Я хочу изменить цвет следующего предложения иногда.

<h2 t="luminaires.list.enter-serialnumber">Bitte geben Sie eine neue Seriennummer ein</h2>

Например, когда какое-то тело дает повторяющийся серийный номер, я хочу изменить цвет на красный. Я могу открыть диалог через следующий код:

this.dialogService.open({ viewModel: SerialnumberDialog, lock: false })
      .whenClosed((response) => {......

Я хочу использовать концепцию Aurelia для этой цели. Не могли бы вы сказать мне решение?

Answer 1

Я бы использовал css.bind метод на <h2> элемент. Я хотел бы создать метод для вашей модели представления, чтобы иметь возможность решить, хотите ли вы, чтобы текст был красным или нет, а затем сохранить стили в переменной css.

import {DialogController} from "aurelia-dialog";
import {Controller} from "aurelia-templating";

export class SerialnumberDialog {
  private static inject = [DialogController];
  private serialNumber: string;
  private controller: any;


  constructor(controller: Controller) {
    this.controller = controller;
    this.myCss = {
      color: 'black'
    };
  }

  activate(){
    if(//serial number is repetitious){
      this.myCss.color = red;
    }
  }
}

Теперь у вас есть объект myCss, который можно привязать к вашему виду, чтобы изменить цвет вашего текста.

<h2 t="luminaires.list.enter-serialnumber" css.bind="myCss">
  Bitte geben Sie eine neue Seriennummer ein
</h2>

Дуэйн Чаррингтон (Dwayne Charrington) делает отличную статью о связывании css в своем блоге ILikeKillNerds https://ilikekillnerds.com/2016/02/binding-with-style-in-aurelia/ если вам нужна дополнительная информация.