Ionic InternalHTML không hoạt động

Nếu bạn đã sử dụng InnerHTML trong các ứng dụng Ionic Framework và Angular để nhúng HTML thì có lẽ bạn đã tìm cách kích hoạt hoặc kích hoạt các sự kiện cho ứng dụng chính của mình

MyQRCard sử dụng các vùng InternalHTML, cùng với SwiperJS, để trình bày các vùng nội dung khác nhau rõ ràng trong một giao diện giống băng chuyền. Để kích hoạt các sự kiện từ bên trong nội dung được quản lý bởi các vùng bên trongHTML đó, cần sử dụng một cơ chế dễ triển khai

Hiển thị HTML trong trang của bạn

Đoạn mã trên lấy nội dung của nó từ một biến có tên là

1. Trong ứng dụng MyQRCard, nội dung này đến từ dữ liệu được lưu trong bộ nhớ cache cục bộ hoặc cơ sở dữ liệu trực tuyến. Một đường ống được sử dụng để phá vỡ một số định dạng tự động diễn ra khi HTML được nhúng vào HTML, giữ nguyên dạng ban đầu của nó để nó có thể hiển thị chính xác

Đảm bảo đọc và hiểu nguyên tắc bảo mật từ Angular về cách sử dụng InternalHTML

Trong ứng dụng của chúng tôi, nội dung được phân phối thông qua biến

1 có thể chứa hình ảnh, video và nút. Ví dụ: chúng tôi cần một cách để thu phóng hình ảnh khi chúng được nhấn hoặc phản hồi các lần nhấp vào nút trong các biểu mẫu

Kết nối trực tiếp nội dung trong các khu vực bên trongHTML với các chức năng thường đáp ứng với các trang Ionic Framework không rõ ràng ngay lập tức. Vì vậy, một cơ chế khác đã được yêu cầu. Bắt đầu với thông tin sự kiện thô thu được từ một cú nhấp chuột có vẻ đầy hy vọng

3 và gửi chúng đến một hàm có tên là

4. Nếu không có bất kỳ xử lý đặc biệt nào, chức năng đó sẽ nhận được một đối tượng Sự kiện và có quyền truy cập vào hầu hết mọi thứ về phần tử được nhấp

Cách MyQRCard sử dụng cây cầu này là thông qua việc sử dụng các thẻ

5 được đặt một cách chiến lược bên trong các phần tử HTML cần được nắm bắt và xử lý theo đó. Bạn có thể tìm hiểu thêm về quy ước này tại đây

Thẻ này được xử lý, trong ứng dụng của chúng tôi, bằng cách sử dụng một số mẫu tiền xử lý trước khi được lưu trữ bên trong biến

1. Biến

7 giữ URI cho hình ảnh được hiển thị. Nó cũng được lưu trữ bên trong thẻ thuộc tính có tên là

8 vì những lý do mà chúng ta sẽ sớm thấy

Trong ứng dụng của chúng tôi, chúng tôi đã xác định một số loại đối tượng có thể xuất hiện trong nội dungHTML bên trong của chúng tôi. Loại “2” có nghĩa là hình ảnh, đối với chúng tôi. Tuy nhiên, điều quan trọng hơn đối với mục đích sử dụng của chúng tôi là quy ước lưu trữ loại đối tượng bằng thuộc tính

0. Rõ ràng, bạn có thể sử dụng bất kỳ quy ước đặt tên nào phù hợp với mình. Nhưng một người nhất quán được khuyên

Xử lý các sự kiện cho những thứ chúng tôi quan tâm

Chúng tôi tìm kiếm

0 trong chức năng

4 của chúng tôi. Nếu chúng tôi tìm thấy nó, chúng tôi biết rằng chúng tôi có điều gì đó cần chú ý và lấy các thuộc tính khác của phần tử cụ thể đó để xử lý

3 để giúp xác định nhanh các yếu tố mà chúng tôi có thể quan tâm khi sử dụng. Trong ví dụ trên, chúng tôi đang sử dụng câu lệnh

4 mặc dù chúng tôi chỉ có hai loại “đối tượng” mà chúng tôi đã xác định. Các kế hoạch kêu gọi hỗ trợ nhiều loại bổ sung bao gồm video, âm thanh, các cuộc thăm dò tương tác, v.v.

5. Chúng tôi có thể đã thực hiện tất cả điều này trong một chức năng nhưng đã chia nhỏ chúng ra cho mục đích minh họa và thử nghiệm

6 của mình để bao gồm URI trong thẻ

7 của phần tử cũng như thông qua

8. Mặc dù chúng tôi có thể phát hiện ra URI từ việc kiểm tra trực tiếp srcElement, nhưng chúng tôi muốn có sự nhất quán trong mô hình của mình và quyết định rằng tất cả dữ liệu chúng tôi muốn kết nối sẽ được xác định và thiết lập bằng cách sử dụng thuộc tính

9

Thí dụ

10 được hiển thị trong khu vực

11 của nó. Chúng tôi muốn có thể phản hồi các lần nhấp vào ảnh và nút

Người dùng có thể cuộn qua trang và nhấp vào bất kỳ ảnh được nhúng nào hoặc nút Tham dự được liên kết với các sự kiện do ứng dụng trình bày

Đó là một giao diện người dùng phức tạp, nhưng một giao diện nhanh chóng được học. Một số nút tùy chọn nổi là tùy chọn và có thể ẩn

Yêu cầu

Nếu muốn, bạn có thể đánh giá dữ liệu sự kiện nhấp chuột được thu thập từ

12 xung quanh nội dung

10 của bạn, kiểm tra và hành động dựa trên dữ liệu đó

Mục đích của phương pháp được mô tả ở đây là đơn giản hóa và chuẩn hóa mô hình đó, đồng thời làm cho nó linh hoạt hơn. Tuy nhiên, nó yêu cầu bạn xây dựng và áp dụng bộ quy ước viết mã của riêng bạn — cho cả nội dung HTML mà bạn đang trình bày và mã điều khiển ứng dụng của bạn cũng như phản hồi các sự kiện của người dùng trong HTML đó

Cho dù bạn chọn cách tiếp cận nào, bạn sẽ khám phá ra rằng

10 có thể là một cơ chế mạnh mẽ để đưa HTML tùy chỉnh trực tiếp vào các trang của bạn

khả năng trong tương lai

Cách tiếp cận ở đây cũng có thể được mở rộng để cung cấp một tập hợp các khả năng bắc cầu phong phú hơn nữa — chẳng hạn như liệt kê tất cả các phần tử

10

16 của bạn và gửi dữ liệu trở lại các phần tử đó để chúng có thể tự trình bày nội dung động. Sắp xếp meta, theo một cách nào đó