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

我有一个对话框，你可以在这里看到：

<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>

有时我想改变下面句子的颜色

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

---

我想用Aurelia的概念来达到这个目的。您能告诉我解决方案吗？

我会在

元素上使用

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在他的Ilikekillerds博客上写了一篇关于css绑定的文章。

我会在

元素上使用

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博客上写了一篇关于css绑定的文章。

Perfect。非常感谢。亚历克·布坎南用英国式的扣篮！要将样式与代码分开，也许使用

class

会更好（我使用TypeScript）：

…

在标记中。和

activate（）{if（//序列号重复）{conditionalClass=“my red”；}}

，其中

conditionalClass

默认为VM.Perfect中的空字符串。非常感谢。亚历克·布坎南用英国式的扣篮！要将样式与代码分开，也许使用

class

会更好（我使用TypeScript）：

…

在标记中。和

activate（）{if（//序列号重复）{conditionalClass=“my red”；}}

，其中

conditionalClass

默认为VM中的空字符串。