从同一组件打开时，如何以两种不同的方式CSS样式化KendoUI-Dialog标题栏？

Question

我在设计KENDO UI对话框时遇到问题：

我有一个组件，让我们称之为WatComponent。在里面，

• 如果用户单击“禁止”按钮，我希望弹出一个带有黄色/橙色标题栏的警告样式对话框，
• 如果用户单击“危险”按钮，则要弹出带有红色标题栏的错误样式对话框。

如果我通过DialogService打开对话框：

[ngModel]="invoiceQuota.controls.grossAmount.value | number:'1.2-2' 

从同一个组件打开时，如何应用两种不同的CSS样式（以任何方式）以使标题栏以不同的颜色显示？

我尝试过

• 在const dialogRef = this.dialogService.open({ title: this.danger ? 'DANGER!' : 'Warning!', content: WatDialogComponent }); const userInfo = dialogRef.content.instance; userInfo.danger = this.danger; 中添加一个类，但是，当然，我没想到它能起作用。
• 赋予属性<div kendoDialogContainer class="myTitlebarClass"></div>一些功能以将其传递到标题栏，但不幸的是，它仅影响danger内的标题栏，我想访问离外面一步的标题栏。
• 在WatDialogComponent中寻找可以让我做到的财产。

是否存在针对我所缺少的直接解决方案？如果没有，是否有解决方法？

Answer 1

查看DialogRef API https://www.telerik.com/kendo-angular-ui/components/dialogs/api/DialogRef/ 它包含ComponentRef，可用于获取主机元素并添加类：

this.dialog = this.dialogService.open({
    title: 'Warning',
    content: 'Warning'
});
this.dialog.dialog.location.nativeElement.classList.add('warning');

https://plnkr.co/edit/RkW3zHFbmMuQqk4UDYNY?p=preview