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

Sử dụng hộp thoại phương thức trong các ứng dụng web 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 Angular 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.

1. Cài đặt Thư viện

Chúng tôi sẽ phải cài đặt thư viện @developer-partners/ngx-modal-dialo g 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ó:

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 BookListComponent TypeScript:

Lớp BookListComponent 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ụ ModalService 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.

Tiếp theo, chúng tôi sẽ tạo tệp HTML cho BookListComponent nơi chúng tôi sẽ hiển thị danh sách sách trong bảng HTML:

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 createBook trong lớp Typescript của chúng ta. Hàm createBook 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 :

Hàm createBook hiển thị hộp thoại phương thức bằng cách gọi hàm hiển thị của lớp ModalService . Hàm show 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à CreateEditBookComponent , là tham số đầu tiên của chức năng hiển thị trong ảnh chụp màn hình ở trên.

Thành phần CreateEditBookComponent 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:

Đâ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 CreateEditBookComponent sử dụng dịch vụ Góc có tên là ModalReference từ ngx-modal-hộp thoại 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 hủy trong ảnh chụp màn hình ở trên. Chúng tôi gọi hàm hủy 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 saveData . Trong hàm saveData , chúng tôi đóng hộp thoại phương thức giống như trong hàm hủy nhưng chúng tôi cũng chuyển thuộc tính sách 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.

Dịch vụ ModalReference là một loại chung. Khi chúng ta gọi hàm closeSuccess của dịch vụ ModalReference , 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à Sách . Tham số mà chúng ta truyền cho hàm closeSuccess đượ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 show của lớp 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ố newBook 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 sách của mình để hiển thị nó trong giao diện người dùng.

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 editBook có mã gần giống như hàm createBook 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 mô hình của các tùy chọn hộp thoại.

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 mô hình sẽ có sẵn trong dịch vụ ModalReference trong thành phần được sử dụng bên trong hộp thoại thông qua thuộc tính config.model của nó.

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 sách của thành phần CreateEditBookComponent . Thuộc tính mô hình của đối tượng ModalReference.config đượ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.

Đâ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.

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