如何将自定义 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
我尝试了什么:
- 我将以下代码添加到我的 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. 怎么办?
我怎样才能做到这一点?
您可以使用 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时需要应用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 以将文本居中。
这种情况下的问题是您无法覆盖 css background-image 属性 来对齐图标和文本。您只能在 styles.css
中执行此操作
这是演示:
我的问题:
如何将 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. 怎么办?
我怎样才能做到这一点?
您可以使用 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时需要应用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 以将文本居中。
这种情况下的问题是您无法覆盖 css background-image 属性 来对齐图标和文本。您只能在 styles.css
中执行此操作这是演示: