Bạn sử dụng thông báo Toastr như thế nào?

Question

Thư viện Toastr là một dịch vụ có thể tiêm được mà bạn có thể thêm vào các thành phần của mình và sau đó gọi nó để hiển thị thông báo bánh mì nướng trong ứng dụng Angular của bạn

Nội dung chính Show

2. Tạo dịch vụ Toastr của riêng chúng tôi
Phần kết luận
Cách thêm thông báo bánh mì nướng trong Laravel 9
Làm cách nào để sử dụng Toastr trong HTML?
Làm cách nào để tạo thông báo Angular toastr?
Toastr là gì?
Làm cách nào để sử dụng Toastr trong laravel?

Và với hơn 200.000 lượt tải xuống mỗi tuần, đây là một thư viện thông báo hấp dẫn cho các ứng dụng Angular. Vậy tại sao không nhảy lên chuyến tàu hấp dẫn này và tham gia cùng đám đông?

Đây là cách bạn cài đặt nó

npm install --save ngx-toastr

Tiếp theo, bạn sẽ cần thêm các kiểu CSS cần thiết. Nếu bạn đang sử dụng Saas, bạn có thể nhập các tệp kiểu cần thiết vào

@import '~ngx-toastr/toastr';

2 như thế này

@import '~ngx-toastr/toastr';

Hoặc nếu bạn đang sử dụng CSS đơn giản thì bạn sẽ chỉnh sửa phần kiểu trong tệp

@import '~ngx-toastr/toastr';

3 của mình. Đây là những gì nó sẽ trông giống như

"styles": [
  "styles.css",
  "node_modules/ngx-toastr/toastr.css" 
]

Tiếp theo, bạn sẽ nhập ToastrModule và BrowserAnimationsModule vào tệp mô-đun của mình. Đây là một ví dụ

import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
  ],
  bootstrap: [App],
  declarations: [App],
})
class MainModule {}

Và với nó được cài đặt và định cấu hình, chúng tôi đã sẵn sàng tung ra. Chỉ cần lấy một phiên bản của

@import '~ngx-toastr/toastr';

4 trong hàm tạo của thành phần của bạn và sử dụng nó để flash thông báo Toastr trong ứng dụng Angular của bạn

import { ToastrService } from 'ngx-toastr';

@Component({...})
export class HelloWorldComponent {
  constructor(private toastr: ToastrService) {}

  success(): void {
    this.toastr.success('This is a success message', 'Tada');
  }
}

Trị mụn đơn giản. Hở?

Thư viện ngx-toastr là một lựa chọn tuyệt vời nếu bạn muốn có một tùy chọn nhanh

Nhưng nếu bạn muốn một tùy chọn nâng cao hơn và có thể linh hoạt hơn thì hãy đọc tiếp. Chúng tôi sẽ kéo nắp lại và sử dụng một cách tiếp cận hoàn toàn khác để cài đặt và sử dụng toastr trong ứng dụng Angular của bạn

2. Tạo dịch vụ Toastr của riêng chúng tôi

Bước đầu tiên là bao gồm các tệp Toastr được yêu cầu trong tệp

@import '~ngx-toastr/toastr';

5 của chúng tôi. Đây là cách

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ToastrDemo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css">
</head>
<body>
  <app-root></app-root>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</body>
</html>

Tiếp theo, tạo dịch vụ thông báo bánh mì nướng với CLI góc

ng generate service toastr

Thay thế tệp được tạo bằng mã sau

import { InjectionToken } from '@angular/core';

export let TOASTR_TOKEN = new InjectionToken<Toastr>('toastr');

export interface Toastr {
  success(msg: string, title: string)
  info(msg: string, title: string)
  warning(msg: string, title: string)
  error(msg: string, title: string)
}

Trong tệp

@import '~ngx-toastr/toastr';

6 của chúng tôi, chúng tôi khai báo một const loại Toastr từ dịch vụ của chúng tôi

declare const toastr: Toastr;

Và sau đó nhập dịch vụ vào mảng nhà cung cấp

providers: [
    {
      provide: TOASTR_TOKEN,
      useValue: toastr
    }
]

Đây là một ví dụ hoàn chỉnh

@import '~ngx-toastr/toastr';

0

Và bây giờ chúng ta đã bao bọc thư viện Toastr bằng một dịch vụ Angular, chúng ta có thể đưa nó vào các thành phần của mình. Đây là một ví dụ

@import '~ngx-toastr/toastr';

1

Bạn muốn biết nó trông như thế nào?

Phần kết luận

Chúng tôi đã xem xét hai cách khác nhau mà bạn có thể sử dụng để thêm thông báo bánh mì nướng vào ứng dụng Angular của mình

Cách đầu tiên là nhanh chóng và thường là tùy chọn tốt nhất cho hầu hết các ứng dụng Góc. Nhưng nếu bạn đang tìm kiếm một phương pháp nâng cao với khả năng thêm một số chức năng tùy chỉnh sau đó, thì phương pháp thứ hai đáng để xem xét

26-Oct-2022
giải pháp công nghệ

Trong bài viết này, chúng ta sẽ xem cách sử dụng toastr notification trong laravel 9. Sử dụng bánh mì nướng. js, bạn có thể hiển thị thông báo thành công, thông báo cảnh báo và lỗi với sự trợ giúp của phiên trong laravel 9. Vì vậy, trong bài viết này, chúng ta sẽ tìm hiểu về ví dụ về thông báo toastr trong laravel 9 và cách thêm thông báo thông báo toastr tùy chỉnh trong laravel 9

Có nhiều loại thông báo có sẵn để hiển thị các thông báo khác nhau trong laravel 9 hoặc PHP. Hiển thị thông báo bằng phương thức bootstrap, thông báo bật lên đơn giản bằng jquery, hiển thị thông báo bằng tin nhắn flash và thông báo tin nhắn toastr. Ngoài ra, bạn có thể tùy chỉnh theo yêu cầu của mình như thanh tiến trình, nút đóng và thời gian hiển thị thông báo

Vì vậy, hãy xem thông báo toastr trong ví dụ về laravel 9

bạn có thể xem tài liệu chính thức của thông báo toastr. thông báo bánh mì nướng javascript

Cách thêm thông báo bánh mì nướng trong Laravel 9

Trước tiên, chúng tôi sẽ thêm CSS bootstrap, jquery thông báo toastr, CSS toastr và toastr js trong tệp lưỡi chế độ xem chính, tôi đã thêm CDN bên dưới vào thẻ


    How To Add Toastr Notifications In Laravel 9 - Techsolutionstuff

Sau đó, chúng tôi sẽ thêm các thông báo toastr khác nhau vào thẻ tập lệnh như bên dưới

Ngoài ra, bạn có thể tùy chỉnh thông báo toastr như ví dụ về các tùy chọn bên dưới

toastr.options = {
  "closeButton": false,
  "debug": false,
  "newestOnTop": false,
  "progressBar": true,
  "positionClass": "toast-top-right",
  "preventDuplicates": true,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

Sau đó, chúng ta cần hiển thị các thông báo trong tệp xem bằng URL chuyển hướng trong bộ điều khiển. Vì vậy, chúng ta cũng cần thêm một số mã trong bộ điều khiển. Vì vậy, sao chép mã dưới đây trong bộ điều khiển của bạn