在Angular中仅在几秒钟内显示一个div。

huangapple go评论84阅读模式
英文:

Display a div only for few seconds in Angular

问题

我想在 Angular 应用中仅显示一则通知,持续几秒钟,该事件在点击按钮后触发。

英文:

I want to display a notification on angular app only for few seconds, the event is triggered after clicking a button.

答案1

得分: 1

以下是翻译好的内容:

html

  1. <button (click)="showDiv()">点击</button>
  2. <div *ngIf="!hideDivFlg">我的 Div</div>

.ts

  1. showDiv() {
  2. this.hideDivFlg = false;
  3. setTimeout(() => {
  4. this.hideDivFlg = true;
  5. }, 4000);
  6. }
英文:

how about this:

html

  1. <button (click)="showDiv()">Click</button>
  2. <div *ngIf="!hideDivFlg">My Div</div>

.ts

  1. showDiv() {
  2. this.hideDivFlg = false;
  3. setTimeout(() => {
  4. this.hideDivFlg = true;
  5. }, 4000);
  6. }

答案2

得分: 1

以下是您要翻译的内容:

有一个用于显示提示消息的npm包:
https://www.npmjs.com/package/ngx-toastr

npm install ngx-toastr --save
请检查与Angular版本的兼容性

ngx-toastr Angular
11.3.3 8.x
12.1.0 9.x
13.2.1 10.x 11.x
14.3.0 12.x 13.x
15.2.2 14.x.
当前版本 >= 15.x

npm install @angular/animations --save

app.module.ts

  1. import { ToastrModule } from 'ngx-toastr';
  2. ...
  3. imports: [
  4. ...
  5. ToastrModule.forRoot(),
  6. ...]

styles.css

  1. @import '~ngx-toastr/toastr';

angular.json

  1. "styles": [
  2. ...
  3. "node_modules/ngx-toastr/toastr.css"
  4. ],

创建一个新的服务

common.service.ts

  1. import { Injectable } from '@angular/core';
  2. import { IndividualConfig, ToastrService } from 'ngx-toastr';
  3. export interface toastPayload {
  4. message: string;
  5. title: string;
  6. ic: IndividualConfig;
  7. type: string;
  8. }
  9. @Injectable({
  10. providedIn: 'root'
  11. })
  12. export class CommonService {
  13. constructor(
  14. private toastr: ToastrService
  15. ) { }
  16. showToast(toast: toastPayload) {
  17. this.toastr.show(
  18. toast.message,
  19. toast.title,
  20. toast.ic,
  21. 'toast-' + toast.type
  22. );
  23. }
  24. }

最后在您的组件中使用它:

items-component.ts

  1. import { CommonService, toastPayload } from 'src/app/services/common.service';
  2. export class ItemsComponent implements OnInit {
  3. toast!: toastPayload;
  4. constructor(private cs: CommonService,)
  5. }
  6. displayToast(){
  7. this.toast = {
  8. message: '一个酷炫的消息',
  9. title: '一个酷炫的标题',
  10. type: "success",
  11. ic: {
  12. timeOut: 2500,
  13. closeButton: true,
  14. } as IndividualConfig,
  15. };
  16. this.cs.showToast(this.toast);
  17. }

在Angular中仅在几秒钟内显示一个div。

英文:

There is a npm package for toast messages:
https://www.npmjs.com/package/ngx-toastr

npm install ngx-toastr --save
please check the angular version for compatibility

ngx-toastr Angular
11.3.3 8.x
12.1.0 9.x
13.2.1 10.x 11.x
14.3.0 12.x 13.x
15.2.2 14.x.
current >= 15.x

npm install @angular/animations --save

app.module.ts

  1. import { ToastrModule } from 'ngx-toastr';
  2. ...
  3. imports: [
  4. ...
  5. ToastrModule.forRoot(),
  6. ...]

styles.css

  1. @import '~ngx-toastr/toastr';

angular.json

  1. "styles": [
  2. ...
  3. "node_modules/ngx-toastr/toastr.css"
  4. ],

create a new service

common.service.ts

  1. import { Injectable } from '@angular/core';
  2. import { IndividualConfig, ToastrService } from 'ngx-toastr';
  3. export interface toastPayload {
  4. message: string;
  5. title: string;
  6. ic: IndividualConfig;
  7. type: string;
  8. }
  9. @Injectable({
  10. providedIn: 'root'
  11. })
  12. export class CommonService {
  13. constructor(
  14. private toastr: ToastrService
  15. ) { }
  16. showToast(toast: toastPayload) {
  17. this.toastr.show(
  18. toast.message,
  19. toast.title,
  20. toast.ic,
  21. 'toast-' + toast.type
  22. );
  23. }
  24. }

Finally use it in your component:

items-component.ts

  1. import { CommonService, toastPayload } from 'src/app/services/common.service';
  2. export class ItemsComponent implements OnInit {
  3. toast!: toastPayload;
  4. constructor(private cs: CommonService,)
  5. }
  6. displayToast(){
  7. this.toast = {
  8. message: 'A cool Message',
  9. title: 'A cool Title',
  10. type: "success",
  11. ic: {
  12. timeOut: 2500,
  13. closeButton: true,
  14. } as IndividualConfig,
  15. };
  16. this.cs.showToast(this.toast);
  17. }

在Angular中仅在几秒钟内显示一个div。

huangapple
  • 本文由 发表于 2023年4月20日 00:45:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76056984.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定