Hướng dẫn angular render html from server - góc kết xuất html từ máy chủ

Một thay thế

Nếu bạn tự động hiển thị 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 một cách an toàn hơn không? Hãy cùng xem ví dụ này.example.

Trong ứng dụng này, tôi đã sử dụng thư viện dịch Ngx-dịch. Tôi có một tiêu đề, bộ chọn ngôn ngữ và một liên kết được hiển thị động.ngx-translate. I have a header, language selector, and a dynamically rendered link.

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

1. Cập nhật từng tệp dịch để có SXM_LINK.TEXT ,,

Với bên tronginnerHtml:

Tôi đang cố gắng lấy HTML từ dịch vụ REST và hiển thị nó bằng cách sử dụng Angular [4.3]. Tôi có thể xem dịch vụ được gọi và trả về nội dung chính xác. Tuy nhiên, thành phần góc sử dụng điều này dường như không bao giờ thực sự nhận được nội dung. Tôi đã bỏ lỡ điều gì?

Cụ thể là console.log[html] [trong mẫu mã thứ hai bên dưới] luôn xuất ra null.

Tôi có một dịch vụ góc trông giống như:

@Injectable[]
export class SlidesService {

    private requestUrl: string;

    constructor[
        @Inject[AppConfig] private config: AppConfig,
        @Inject[HttpClient] private  HttpClient] {
        this.requestUrl = this.config.restRoot + listSlidesUrl;
    }


    getSlide[deck: string, slide: string]: Observable {

        const headers: HttpHeaders = new HttpHeaders[{'Accept': 'text/html'}];
        const thisUrl: string = this.requestUrl + '/' + deck + '/' + slide;

        return this.http.get[thisUrl, { headers: headers }];
    }
}

Điều này được sử dụng bởi một thành phần:

export class SlidePreviewComponent implements OnInit {

    @Input[] slide: string;     /* Identifier for the slide */
    @Input[] deck: string;
    slideHtml: string;


    constructor[private slideService: SlidesService] {

      }

    ngOnInit[]: void {
        this.slideService.getSlide[this.deck, this.slide]
            .subscribe[html =>  this.setSlideHtml[html] ];
    }

    setSlideHtml[html: string] {
        this.slideHtml = html;
        console.log[html];
    }
}

Gói nào @angular/* có liên quan/liên quan đến yêu cầu tính năng?

Trình biên dịch, Core, trình duyệt nền tảng-Dynamic, trình duyệt nền tảng

Sự mô tả

Theo như tôi biết aproach cũ là tiêm Jitcompiler và sử dụng nó để hiển thị HTML của bạn trong một thành phần ẩn danh. Điều này đã làm việc cho đến nay. Tôi sử dụng HTML có thể chỉnh sửa trong DB, sử dụng các tính năng chính làm biến thay thế và các chỉ thị như *NGIF hoặc *ngswitch.

Điều này không hoạt động nữa trong chế độ sản xuất [Angular 12.x] Tôi đã duyệt StackOverflow và các diễn đàn khác để tìm một công việc cho việc này và những thứ này không hoạt động nữa [như tải Jitcompiler vào các nhà cung cấp, dẫn đến việc trình biên dịch JIT JIT không có sẵn.

Như tôi đã tìm thấy không phải là linh hồn cho Ivy/ng 12, tôi đã coi tính năng này vẫn còn thiếu.

Best,

Malte

Giải pháp đề xuất

Thành phần để hiển thị chuỗi HTML.

Example: