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ụ

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

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

Đó 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

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ẻ , thì Angular theo mặc định sẽ không hiển thị dưới dạng HTML.

Đâ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ẻ , thì Angular theo mặc định sẽ không hiển thị dưới dạng HTML.

Hãy xem ví dụ hoạt động này được lấy từ Tài liệu góc

Nếu bạn cố gắng hiển thị thẻ thông qua phép nội suy [{{ & }} . Nếu bạn cố gắng kết xuất nó bằng cách sử dụng liên kết thuộc tính, Angular sẽ bỏ qua giá trị trong mẫu và ghi lại cảnh báo này trong bảng điều khiển. ], Angular will render the value as text. If you attempt to render it using property binding, Angular ignores the value in the template and logs this warning in the console:

"CẢNH BÁO. khử trùng HTML đã loại bỏ một số nội dung [xem http. //g. co/ng/an ninh#xss]. ”

Angular đang sử dụng một lớp có tên là DomSanitizer để xử lý tất cả những điều này nhưng nó có một số nhược điểm. Đối với trường hợp sử dụng tiềm năng của chúng tôi về hiển thị HTML do người dùng tạo, nếu người dùng đã thêm thẻ hoặc kiểu nội tuyến trên các phần tử của họ, thì nó sẽ không có . StackBlitz example.

Cứu giúp

Một cách để vượt qua thử thách này là tự tạo ống vệ sinh. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Bằng cách sử dụng phương thức DomSanitizer của bypassSecurityTrustHtml, . bỏ qua bảo mật/vệ sinh mặc định của Angular và tin tưởng vào giá trị HTML đã nhập. Trong mẫu, thêm đường ống của bạn.

Và phong cách của bạn sẽ có hiệu lực. Xem toàn bộ ví dụ tại đây.

một sự thay thế

Nếu bạn đang hiển thị động một số nội dung HTML trong ứng dụng của mình, bạn có thể đã sử dụng InternalHtml, nhưng điều này có thể được thực hiện theo cách an toàn hơn không? . example.

Trong ứng dụng này, tôi đang sử dụng thư viện dịch ngx-dịch . Tôi có tiêu đề, bộ chọn ngôn ngữ và liên kết được hiển thị động.

Để tái cấu trúc điều này theo cách tiếp cận mà không cần innerHtml ,

1. Cập nhật từng tệp dịch để có “SXM_LINK. VĂN BẢN”, “SXM_LINK. LANG” và “SXM_LINK. URL” thay vì “SXM_LINK”

Với innerHtml.

Không có

2. Cập nhật mẫu thành phần để sử dụng thẻ với các khóa dịch đó thay cho