Hướng dẫn angular load html from url - tải góc html từ url

Tôi đang sử dụng Angular 7. Tôi muốn gọi một URL trả về HTML (về cơ bản hiển thị bản đồ từ một trang web).

Thông qua chương trình bên dưới, tôi có thể nhấn URL máy chủ bên ngoài (http: // localhost: 3344/webappbuilder/apps/8) và nó tạo ra một blob (trả về văn bản/html).

Tôi muốn thao tác với Blob và đặt nó lên Div để hiển thị HTML dưới dạng bản đồ.

Tôi có thể biết làm thế nào tôi có thể điều khiển Blob và hiển thị kết quả (HTML) dưới dạng bản đồ trên góc 7.

Và cũng cho tôi biết:

Làm cách nào để tải tệp HTML bên ngoài (http: // localhost: 3344/webappbuilder/apps/8/index.html) trên trang góc của tôi (Angular 7)?

Đã hỏi ngày 6 tháng 12 năm 2018 lúc 10:37Dec 6, 2018 at 10:37

2

Bạn sẽ có thể liên kết giá trị mà bạn nhận được vào [bên trong] của một div.

Trong mã thành phần, bạn cần đưa văn bản vào một chuỗi:

htmlTemplate = '
Test Html
';

Sau đó, bạn có thể liên kết bên trong của một thành phần hiện có.

Tìm ví dụ Stackblitz tại đây: https://stackblitz.com/edit/angular-xcr1jk

Đã trả lời ngày 6 tháng 12 năm 2018 lúc 10:44Dec 6, 2018 at 10:44

nipuna777nipuna777nipuna777

5.5072 Huy hiệu vàng31 Huy hiệu bạc47 Huy hiệu đồng2 gold badges31 silver badges47 bronze badges

Bạn có thể thêm nó bằng cách sử dụng bên trong

Nhưng bạn cần phải vệ sinh nếu bạn đang làm điều này.

Domsanitizer giúp ngăn chặn các lỗi bảo mật kịch bản trang web (XSS) bằng cách vệ sinh các giá trị để được an toàn để sử dụng trong các bối cảnh DOM khác nhau.

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtml implements PipeTransform {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustStyle(html);
  }
}

Như thế này

Bạn có thể nhận được thêm tài liệu tham khảo trong liên kết bên dưới về vệ sinh HTML và Styles, v.v.

Tham khảo: Trong RC.1, một số kiểu không thể được thêm vào bằng cách sử dụng cú pháp liên kết

Đã trả lời ngày 6 tháng 12 năm 2018 lúc 11:14Dec 6, 2018 at 11:14

Rijinrijinrijin

1.67912 huy hiệu bạc21 Huy hiệu đồng12 silver badges21 bronze badges

Tôi nghĩ rằng tôi sẽ cố gắng chia sẻ một giải pháp nhỏ cho một vấn đề hài hước với bạn (chú ý cách tôi chia sẻ nó với 'bạn' - nếu bạn ở đây, tôi hoan nghênh bạn và rất vui khi có thể giúp đỡ - nếu bạn không ở đây không Người ta sẽ nhận thấy rằng tôi đã sử dụng thuật ngữ 'bạn'. Thông minh hả;)

Hôm nọ chúng tôi phải thực hiện các điều khoản mới trong hình thức trên máy bay của chúng tôi. Điều hấp dẫn là các điều khoản được lưu trữ trên một trang web bên ngoài. Trang web của chúng tôi được xây dựng trong Angular 11 và đây có vẻ như là một vấn đề tầm thường có thể được thực hiện trong vài giây. Mà nó có thể nếu bạn bỏ qua phần UX.

Đề xuất đầu tiên chỉ đơn thuần là một yếu tố A chỉ vào URL với các điều khoản:

  {{ ‘I have read and accepted’ | translate }}


  {{ ‘terms’ | translate }}

Vấn đề chính với điều này là người dùng của bạn hiện đang bị ném vào một trang web bên ngoài ở giữa quy trình trên máy bay. Hơn nữa, không có cách nào dễ dàng trở lại; Bạn không thể kiểm tra ‘Chấp nhận trên trang bên ngoài, bạn phải đóng trang một lần nữa theo cách thủ công và quay lại biểu mẫu và vv. Chỉ là không tốt ux.

Giải pháp - Xóa web

Tại sao không cạo các thuật ngữ văn bản từ trang web bên ngoài và chèn nó vào một phương thức thay thế? Hãy để điều đó làm điều đó.

Đầu tiên chúng ta cần biết nơi nào và những gì chúng ta đang cố gắng để có được. ‘Nơi mà chỉ là URL cho trang web.

Chúng tôi sẽ sử dụng Async/Await (mà ES7 tôi tin) và trước tiên nhận được toàn bộ trang web HTML:

(async () => {
  const response = await fetch('https://your/external/terms/');
  const text = await response.text();
  console.log(text);
})();

Sau đó, bảng điều khiển sẽ in ra tất cả HTML - nhưng với một tác phẩm: Đây là một chuỗi! Mẹo: Bạn có thể thực hiện điều này trực tiếp trong trình duyệt bằng cách đi đến URL bên ngoài, mở bảng điều khiển trong các công cụ phát triển, dán vào mã trên và Nhấn Enter' :)
Tip: You can do this directly in the browser by going to the external URL, open the console in developer tools, paste in the above code and hit ‘Enter’ :)

Đối với ‘những gì mà đi đến trang web đã nói, nhấp chuột phải vào văn bản và chọn‘ Kiểm tra phần tử. Đây là những gì nó trông giống như trong trường hợp của tôi:

Div được đánh dấu màu xanh là những gì tôi cần. Lần gần nhất tôi nhận được một cái gì đó mà tôi có thể giải quyết trực tiếp là Div anh chị em với id = Thanh bên, vì vậy hãy để thử nó.

Thách thức của chúng tôi ở đây là chúng tôi không thể điều hướng HTML ở định dạng chuỗi - chúng tôi cần một DOM, vì vậy hãy để định dạng chuỗi ’trở lại HTML.

Tôi đã chọn một gói NPM được sử dụng tốt và duy trì node-html-parser và thêm

0 vào thành phần của tôi. Vì vậy, hãy để Lừa đặt điều đó để làm việc.

(async () => {
  const response = await fetch('https://your/external/terms/');
  const text = await response.text();
  const terms = parse(text);
})();

1 hiện là chuỗi được chuyển đổi thành HTML mà bây giờ chúng ta có thể đi qua để chúng ta sẽ loại bỏ div

2, đi đến anh chị em tiếp theo và lấy HTML bên trong.

htmlTerms: string;(async () => {
  const response = await fetch('https://your/external/terms/');
  const text = await response.text();
  const terms = parse(text);
  this.htmlTerms = terms.querySelector('#sidebar').nextElementSibling.innerHTML;
})();

Đầu tiên chúng tôi lấy ra tất cả các HTML dưới dạng chuỗi có phản hồi.text () nhưng để đến các bộ phận ngon ngọt, chúng tôi đã phân tích lại HTML với Parse (văn bản) và đi qua DOM mới được tạo này với

3. Bây giờ bạn có một chuỗi một lần nữa chứa nội dung chính xác bạn cần và có thể đặt trực tiếp vào chế độ xem thành phần của riêng bạn với thuộc tính

4.
You now have a string again containing the exact content you need and can place that directly in your own component view with the property

4 .

Lưu ý rằng Angular đã được xây dựng trong XSS và bạn có thể cần nhiều thao tác hơn so với được trình bày ở trên. Ngoài ra, bạn sẽ mất HTML nếu trang web bên ngoài được thay đổi liên quan đến mã cạo của bạn. Vì vậy, có lẽ bạn cần một số xử lý lỗi chỉ trong trường hợp;)
So maybe you need some error handling just in case ;)

Tôi đã chọn một phương thức tương tác cho các thuật ngữ (bằng tiếng Đức;) nhưng bạn có thể thực hiện nó bằng mọi cách bạn muốn.

Tất nhiên bạn có thể thao tác mã hoặc thêm kiểu dáng của riêng bạn (hoặc kiểu dáng của chúng) nhưng bạn càng thao túng càng có thể phá vỡ nếu trang web gốc bị thay đổi nên tôi thích KISS.

Chúc vui vẻ.