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

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

我的问题:

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

例如吐司图片:example toast

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

我的 Angular 目录是什么样的

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

我尝试了什么:

  1. 我将以下代码添加到我的 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' 
    });
  }
}

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

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

我怎样才能做到这一点?

您可以使用 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.
    });
  }
}

使用toast时需要应用titleClassmessageClassoverwrite 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