Sử dụng hộp thoại phương thức trong là khá phổ biến. Cho dù bạn muốn chỉnh sửa bản ghi trong bảng mà không cần điều hướng đến một trang khác, tra cứu một số dữ liệu hay chỉ hiển thị thông báo cảnh báo cho người dùng của mình, sử dụng hộp thoại theo chế độ có thể là một trải nghiệm người dùng tuyệt vời. Thật không may, làm điều đó không dễ dàng trong nếu không có thư viện của bên thứ ba. Nó yêu cầu viết một số mã không tầm thường và hiểu biết về các cơ chế bên trong của khung Angular. Đó là lý do tại sao chúng tôi đã phát triển một thư viện tại Đối tác của nhà phát triển để hiển thị các hộp thoại theo chế độ trong Angular. Chúng tôi sẽ sử dụng thư viện của chúng tôi trong bài viết này. các ứng dụng web Angular 1. Cài đặt Thư viện Chúng tôi sẽ phải cài đặt thư viện của chúng tôi thông qua NPM và đưa nó vào các mô-đun Angular của chúng tôi để có thể sử dụng nó. Đây là lệnh NPM để cài đặt nó: @developer-partners/ngx-modal-dialo g cài đặt npm @ developer-partners/ngx-modal-dialog Tiếp theo, chúng ta phải đưa nó vào các mô-đun Góc nơi chúng ta phải sử dụng các hộp thoại phương thức. Ứng dụng demo của chúng tôi rất nhỏ, nó chỉ có một mô-đun có tên là AppModule. Chúng tôi phải bao gồm ModalModule từ thư viện trong mảng nhập của mô-đun AppModule Angular của chúng tôi: Tất cả chúng ta đều được sắp xếp. Chúng ta có thể bắt đầu sử dụng thành phần hộp thoại phương thức trong ứng dụng của mình. 2. Hiển thị hộp thoại Modal Như đã đề cập trước đó, chúng tôi sẽ hiển thị hộp thoại phương thức của mình khi chúng tôi muốn thêm hoặc chỉnh sửa một cuốn sách trong danh sách sách của mình. Trước tiên hãy tạo một thành phần nơi chúng ta sẽ hiển thị danh sách sách. Chúng ta sẽ tạo một thành phần Angular mới và gọi nó là . BookListComponent Đây là nội dung của lớp TypeScript: BookListComponent Lớp của chúng tôi sử dụng danh sách sách được mã hóa cứng làm dữ liệu để hiển thị trong bảng của chúng tôi để đơn giản. Nó cũng cần dịch vụ Angular từ thư viện ngx-modal-dialog để có thể hiển thị các hộp thoại phương thức, đó là lý do tại sao chúng tôi đưa nó vào hàm tạo của mình. BookListComponent ModalService Tiếp theo, chúng tôi sẽ tạo tệp HTML cho nơi chúng tôi sẽ hiển thị danh sách sách trong bảng HTML: BookListComponent Mã HTML ở trên khá đơn giản. Nó hiển thị danh sách các cuốn sách trong một bảng. Nó cũng có một nút gọi là "Thêm sách mới". Đây là những gì giao diện người dùng trông giống như cho đến nay: Khi nhấp vào nút "Thêm sách mới", nó sẽ gọi hàm trong lớp Typescript của chúng ta. Hàm hiển thị hộp thoại phương thức để thêm một cuốn sách mới vào bảng của chúng tôi. Đây là mã TypeScript của hàm : createBook createBook createBook Hàm hiển thị hộp thoại phương thức bằng cách gọi hàm của lớp . Hàm nhận 2 tham số: lớp của thành phần Angular để hiển thị bên trong hộp thoại phương thức và các tùy chọn của hộp thoại phương thức là các cài đặt của hộp thoại như tiêu đề, kích thước, vị trí và một số thứ khác. Hộp thoại phương thức cần một thành phần Góc để hiển thị trong phần thân của nó. Không có thành phần đó, hộp thoại phương thức của chúng tôi sẽ chỉ là một bảng điều khiển trống bao phủ màn hình. Thành phần đó là , là tham số đầu tiên của chức năng trong ảnh chụp màn hình ở trên. createBook hiển thị ModalService show CreateEditBookComponent hiển thị Thành phần Angular sẽ chịu trách nhiệm cho cả việc thêm và chỉnh sửa sách. Chúng tôi sẽ bắt đầu bằng cách làm việc với mã để thêm sách mới. Đây là mã HTML của CreateEditBookComponent chỉ có một số trường để nhập ID và tên sách chúng tôi muốn tạo và có các nút để đóng hộp thoại và lưu dữ liệu: CreateEditBookComponent Đây là giao diện người dùng hộp thoại phương thức trông như thế nào: Đây là mã TypeScript của thành phần CreateEditBookComponent: Thành phần sử dụng dịch vụ Góc có tên là từ thư viện. Chúng tôi sử dụng dịch vụ đó để tương tác với hộp thoại phương thức nơi đặt thành phần của chúng tôi, chẳng hạn như đóng phương thức hoặc đăng ký các sự kiện của nó. Chúng tôi chỉ cần đóng hộp thoại phương thức trong chức năng trong ảnh chụp màn hình ở trên. Chúng tôi gọi hàm khi nhấp vào nút "Hủy" từ HTML. Khi chúng tôi nhấp vào nút "Lưu" trong mã HTML, nó sẽ gửi biểu mẫu gọi hàm . Trong hàm , chúng tôi đóng hộp thoại phương thức giống như trong nhưng chúng tôi cũng chuyển thuộc tính cho hộp chứa dữ liệu để thêm sách mới vào danh sách của chúng tôi. CreateEditBookComponent ModalReference ngx-modal-hộp thoại hủy hủy saveData saveData hàm hủy sách Dịch vụ là một loại chung. Khi chúng ta gọi hàm của dịch vụ , chúng ta phải truyền một đối tượng cùng loại với tham số chung của nó. Trong trường hợp của chúng tôi, đó là một giao diện Bản mô tả được gọi là . Tham số mà chúng ta truyền cho hàm được truyền lại cho thành phần đã tạo hộp thoại phương thức bằng cách gọi hàm của lớp . ModalReference closeSuccess ModalReference Sách closeSuccess show ModalService Khi gọi hàm closeSuccess của dịch vụ ModalReference, nó sẽ đóng hộp thoại phương thức và kích hoạt sự kiện RxJS chuyển sách mới tạo cho người đăng ký sự kiện đó. Trong ảnh chụp màn hình ở trên, tham số của chức năng gọi lại của chúng tôi là cuốn sách mới được tạo mà chúng tôi đã nhận được từ hộp thoại phương thức, vì vậy chúng tôi chỉ cần thêm nó vào mảng của mình để hiển thị nó trong giao diện người dùng. newBook sách 3. Truyền dữ liệu vào hộp thoại phương thức Có một số trường hợp bạn cần chuyển một số dữ liệu sang hộp thoại phương thức. Ví dụ: nếu chúng tôi muốn chỉnh sửa một cuốn sách từ danh sách, chúng tôi có thể chuyển bản ghi sách mà chúng tôi muốn chỉnh sửa sang hộp thoại phương thức để có dữ liệu ban đầu mà chúng tôi muốn sửa đổi. Hãy bắt đầu bằng cách thêm một nút vào các hàng của bảng để chỉnh sửa dữ liệu hàng: Đây là giao diện người dùng với nút Chỉnh sửa trong mỗi hàng của bảng: Hàm có mã gần giống như hàm chỉ với một điểm khác biệt quan trọng. Nó chuyển cuốn sách mà chúng tôi muốn chỉnh sửa sang hộp thoại phương thức bằng cách sử dụng thuộc tính của các tùy chọn hộp thoại. editBook createBook mô hình Tham số mà chúng ta chuyển đến hộp thoại phương thức bằng cách sử dụng thuộc tính sẽ có sẵn trong dịch vụ trong thành phần được sử dụng bên trong hộp thoại thông qua thuộc tính của nó. mô hình ModalReference config.model Trong ảnh chụp màn hình ở trên, chúng tôi đang sao chép tham số đã truyền và gán nó cho thuộc tính của thành phần . Thuộc tính của đối tượng được truyền theo tham chiếu, do đó, bất kỳ thay đổi nào chúng tôi thực hiện trong các thuộc tính của đối tượng đó sẽ được phản ánh trong bảng nơi chúng tôi hiển thị danh sách sách. Lý do tại sao chúng tôi sao chép nó là để không sửa đổi hàng trong bảng cho đến khi người dùng nhấp vào nút "Lưu". Nếu người dùng nhấp vào nút "Hủy", dữ liệu của bảng sẽ không được cập nhật. sách CreateEditBookComponent mô hình ModalReference.config Đây là giao diện của hộp thoại chỉnh sửa sách: Phần kết luận Xây dựng hộp thoại phương thức cho Angular từ đầu không dễ dàng, nhưng sẽ dễ dàng hơn nhiều với thư viện hộp thoại phương thức của chúng tôi. Chúng tôi đã giới thiệu cách thiết lập thư viện và sử dụng nó để hiển thị các hộp thoại theo chế độ trong dự án của bạn. Chúng tôi đã xem qua hầu hết các trường hợp sử dụng và tính năng cơ bản của hộp thoại, nhưng thư viện @developer-partners/ngx-modal-dialog có rất nhiều tính năng khác mà bạn có thể thấy hữu ích trong các dự án thực tế của mình. Cũng được xuất bản ở đây. Vui lòng theo liên kết dưới đây để tìm hiểu thêm về nó: @ nhà phát triển-đối tác/ngx-modal-dialog Trong trường hợp nếu bạn muốn hiển thị một công cụ quay vòng tải đẹp mắt trong các hộp thoại phương thức của mình, vui lòng xem bài viết của chúng tôi về cách xây dựng một công cụ quay vòng tải trong Angular: Cách tạo một Loading Spinner trong góc

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Making security fun one episode at a time

Cách hiển thị hộp thoại phương thức trong góc

dài quá đọc không nổi

Developer Partners

STORY’S CREDIBILITY

AI-assisted

Guide

Vested Interest

About Author

chuyên mục

Languages

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI...

Cách hiển thị hộp thoại phương thức trong góc

dài quá đọc không nổi

Developer Partners

STORY’S CREDIBILITY

AI-assisted

Guide

Vested Interest

About Author

chuyên mục

Languages

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI...

NHỮNG BÀI VIẾT LIÊN QUAN