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.

Learn More

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

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

About Author

BÌNH LUẬN

chuyên mục

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

Related Stories

94 Stories To Learn About John Locke

72 Stories To Learn About Adam Smith

128 Stories To Learn About Charles Dickens

287 Stories To Learn About Blockchain Development

94 Stories To Learn About John Locke

72 Stories To Learn About Adam Smith

128 Stories To Learn About Charles Dickens

287 Stories To Learn About Blockchain Development

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps