Nhúng trang html vào góc

Một tùy chọn là nhúng mã trực tiếp vào html và giải pháp khác tốt hơn là tạo Thành phần

1. Nhúng mã vào bất cứ đâu trong trang

Đây là một tùy chọn quen thuộc và là cách dễ nhất để thực hiện. Vì vậy, bạn chỉ có thể truy cập html trên bất kỳ tệp Angular nào của mình và dán trực tiếp mã EmbedSocial

Đây là một ví dụ

Nhúng trang html vào góc

2. Tạo một thành phần

Có hai bước bạn cần làm theo để đạt được điều này

  • Tạo thành phần

  • Sử dụng thành phần

1. Trong thiết bị đầu cuối, sử dụng lệnh sau `ng tạo thành phần EmbedSocialWidget` để tạo thành phần góc có tên `EmbedSocialWidget`

2. Sau khi thành phần được tạo, hãy mở `EmbedSocialWidget. thành phần. ts` và thêm một chuỗi `@Input() được trang trí` có tên là `refId` ngay phía trên hàm tạo

3. Trong cùng một tệp đó, bên trong hàm `ngOnInit()`, hãy thêm javascript nhúng, chịu trách nhiệm xây dựng tiện ích con

Tệp thành phần của bạn `EmbedSocialWidget. thành phần. ts` sẽ giống như hình bên dưới

Nhúng trang html vào góc

Sử dụng thành phần

Đầu tiên, đăng nhập vào tài khoản EmbedSocial của bạn và truy cập Widgets. Mở một trong các tiện ích mà bạn muốn nhúng và lấy giá trị thuộc tính EmbedSocial data-ref (như đã đề cập ở trên)

Thuộc tính data-ref sẽ trông như thế này

data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"

Khi bạn có tham chiếu dữ liệu, bạn có thể sử dụng thành phần `EmbedSocialWidget` mới được tạo một cách tự do ở bất kỳ đâu trong dự án góc cạnh của bạn. Chỉ cần chỉnh sửa liên kết `refId` của thành phần với refId mà bạn đã sao chép từ EmbedSocial trước đó

Đây là một ví dụ về việc sử dụng thành phần

Nhúng trang html vào góc

Đó là nó

Hy vọng điều này hữu ích và nếu bạn có thắc mắc hoặc cần hỗ trợ, vui lòng liên hệ và trò chuyện với chúng tôi

Trước tiên, hãy nói về lý do tại sao bạn muốn liên kết HTML trong một thành phần Góc. Bạn có thể có một số HTML do người dùng tạo mà bạn muốn hiển thị trong dom. Bạn thậm chí có thể nhận lại HTML trong phản hồi API. Hoặc bạn có thể có một số HTML cần được hiển thị động

Vì vậy, làm thế nào nó hoạt động?

innerHtml là thuộc tính phần tử HTML đã tồn tại mà Angular có thể liên kết bằng cách sử dụng dấu ngoặc vuông (  [ & ] ). For example, in your template you may have something like this:

Đây có phải là điều tôi nên làm không?

Co le không. Đối với HTML do người dùng tạo hoặc HTML đến từ phản hồi API, có thể không có tùy chọn nào khác. Đối với HTML được kết xuất động, có thể có một tùy chọn thân thiện với Góc khác


Việc cho phép người dùng hoặc API bên ngoài ra lệnh cho HTML được hiển thị trong ứng dụng của bạn có thể gây ra một số do dự. Tuy nhiên, Angular cung cấp một số bảo mật bổ sung xung quanh nội dung HTML ràng buộc bằng cách vệ sinh HTML trước khi hiển thị nó. Nếu giá trị HTML chứa thẻ