如何更改 Aurelia 对话框中的文本颜色？

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

我会在 <h2> 元素上使用 css.bind 方法。我会在您的视图模型上创建一个方法来决定您是否希望文本为红色，然后将样式存储在 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 在他的 ILikeKillNerds 博客 https://ilikekillnerds.com/2016/02/binding-with-style-in-aurelia/ 上写了一篇关于 css 绑定的精彩文章。

如何更改 Aurelia 对话框中的文本颜色？

How to change text colour in Aurelia Dialog?

aurelia

aurelia-dialog