如何将自定义 css 添加到 Angular 中的单个 Toast 消息？

Question

我的问题：

如何将 css 添加到 Angular 中组件中使用的单个 Toast，因为可以有多个 toast 但我想更改单个 toast？

例如吐司图片：example toast

我想将我的 css 添加到特定的 toast message.So，这样我就可以 将消息文本居中对齐 即文件导入开始..

我的 Angular 目录是什么样的

 | app
    |
    |-components
    |    |
    |    |-test [/app.ts , /app.css]
    |
    |style.css

我尝试了什么：

我将以下代码添加到我的 CSS 和 TS 代码中：

我的粗略app.css代码

.test {
   text-align : center !important // I tried without ! important also
}

我的粗略app.ts代码

import { Component } from '@angular/core';
import {ToastrService} from 'ngx-toastr';

@Component({
  selector: 'my-app',
  templateUrl: './app.html',
  styleUrls: [ './app.css' ]
})

export class app {
  constructor(private toastr: ToastrService) {}

  showSuccess() { 

       // I tried \" test \" also

    this.toastr.success('<span class="test">File import started</span>', '', {

      enableHtml : true   //even I have added the messageClass : 'test' 
    });
  }
}

它是如何工作的，但我不想要这些方法：

通过将我的css代码放入style.css（主要全局css）（X我不想改变我的主要风格）
通过添加 ::ng-deep .test instead of .test ：这是有害的，它会改变我所有的 toast-dialogue。
通过在@component 中添加 encapsulation: ViewEncapsulation.None ：但这会改变我的其他 Css.
通过使用 <center> 标签：我仍然不想这样做，因为它会解决我的问题，但是如果我想添加多个 css.

我怎样才能做到这一点？

Answer 1

您可以使用 titleClass 属性在 toast 消息上应用 css class。

import {ToastrService} from 'ngx-toastr';

@Component({
  selector: 'my-app',
  templateUrl: './app.html',
  styleUrls: [ './app.css' ]
})

export class app {
  constructor(private toastr: ToastrService) {}

  showSuccess() { 
    this.toastr.success('File import started', '', {
      messageClass: 'test'// this will apply the test class to the toast title.
    });
  }
}

Answer 2

使用toast时需要应用titleClass和messageClass，overwrite css background-image 到 对齐图标和文本:

 showSuccess() {
    this.toastr.success("Hello world!", "Toastr fun!", {
      titleClass: "center",
      messageClass: "center"
    });
  }

在您的全局样式中添加 css class：

Styles.css:

.center {
  text-align: center;
}

.toast-success {
  padding-left: 80px;
  text-align: center;
  background-position: 35% !important;
}

或者使用 :ng-deep 如果你想在组件的样式中添加它 css:

app.component.css

:ng-deep .center {
  text-align: center;
}

另一种选择是创建您自己的扩展 Toast 的 toast 组件，并使用它自定义其模板，添加 css class 以将文本居中。

Using a Custom Toast

这种情况下的问题是您无法覆盖 css background-image 属性来对齐图标和文本。您只能在 styles.css

中执行此操作

Changing default icon styles

这是演示：

https://stackblitz.com/edit/ngx-toastr-angular2-4pqrqw

如何将自定义 css 添加到 Angular 中的单个 Toast 消息？

How to add custom css to the single Toast message in Angular?

css

angular

typescript

toast

toastr

我的问题：

我尝试了什么：

它是如何工作的，但我不想要这些方法：