Kendo UI angular DialogService - 更改标题栏背景颜色

Question

我希望能够更改使用 kendo UI angular 的 DialogService 创建的结果对话框的 background-color。

调整对话框的内容甚至通过 scss 覆盖 background-color 都很容易，但只有一种固定颜色，而我需要从几种颜色中进行选择。

所以我想要么在运行时设置颜色，要么至少在包装器上设置一个 class，这样我就可以通过 scss 设置它们的样式。

有什么想法吗？

Answer 1

我为此制定了解决方案。它有效，但一点也不优雅。

这是演示代码的插件 link： http://plnkr.co/edit/MGw4Wt95v9XHp9YAdoMt?p=preview

服务中的相关代码如下：

const dialog: DialogRef = this.dialogService.open({
  actions: message.actions,
  content: MessageComponent,
  title:   message.title
});

const messageComponent = dialog.content.instance;
messageComponent.message = message;

//I get the dialog element and use jQuery to add classes to override styles.
//Let's say I had the error class as well.
const element = dialog.dialog.location.nativeElement;
$( element ).addClass( 'kendo-override ' + message.classes );

return dialog.result;

和 scss:

$error: #c13;
$success: #0c5;

.kendo-override {

  &.error {
    kendo-dialog-titlebar {
      background-color: $error;
    }
  }

  &.success {
    kendo-dialog-titlebar {
      background-color: $success;
    }
  }
}

Kendo UI angular DialogService - 更改标题栏背景颜色

Kendo UI angular DialogService - Change the title bar background color

kendo-ui-angular2

angular