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

angular-render-html-once

Thư viện này giúp giữ chuỗi HTML được hiển thị một lần, ngay cả khi ban đầu chúng được hiển thị phía máy chủ.

Bất cứ khi nào kết xuất sẽ xảy ra, và chuỗi HTML đã được hiển thị, kết quả là các yếu tố DOM sẽ được sử dụng lại.

Điều này khá quan trọng khi tích hợp ứng dụng góc với mã bên ngoài được duy trì bởi một số thư viện khác.

Cách sử dụng

Enabing/vô hiệu hóa

Kết xuất một lần được bật theo mặc định. Nếu bạn muốn vô hiệu hóa nó vĩnh viễn, hãy sử dụng phương thức tĩnh RenderHtmlOnceComponent.disable() - nó sẽ ngăn không được bộ nhớ đệm/sử dụng bộ đệm kể từ bây giờ. Phương pháp tĩnh bổ sung RenderHtmlOnce.enable() sẽ cho phép nó một lần nữa.

bootstrap (tùy chọn)

Gọi Phương thức tĩnh không đối thủ RenderHtmlOnceComponent.registerServerSideRenderedComponents() Bất cứ khi nào áp dụng (ví dụ: trong hàm tạo của mô-đun ứng dụng của bạn) để quét nó cho bất kỳ thành phần nào được hiển thị phía máy chủ có thể đã được sử dụng.

Quan trọng: Điều này cần phải được thực hiện trước khi bất kỳ kết xuất góc nào xảy ra, vì điều đầu tiên Angular thực hiện là xóa bất kỳ nội dung hiện có nào của phần tử DOM gốc. this needs to be done before any angular rendering occurs, since first thing angular does is clearing any existing content of root DOM element.

Thành phần

• Sử dụng thành phần bất cứ nơi nào bạn thường sử dụng Chỉ thị ____10
• Đầu vào:

  • 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);
        }
    }
    

    1 Yêu cầu - Thuộc tính HTML cũ đơn giả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);
        }
    }
    

    1; bắt buộc để phù hợp với các thành phần bất cứ khi nào chúng có thể bị phá hủy và tạo lại (hoặc được tạo từ phía trình duyệt đầu và khớp với chúng với các đối tác được hiển thị phía máy chủ của chúng)required - plain old HTML

    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);
        }
    }
    

    1 attribute; required to match components whenever they could be destroyed and created again (or created from scratch browser-side and match them with their server-side rendered counterparts)

  • 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);
        }
    }
    

    3 Yêu cầu - Chuỗi nội dung HTML bạn muốn được nhúng trong thành phầnrequired - HTML content string you wish to have embedded within component

  • 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);
        }
    }
    

    4 (Tùy chọn; Mặc định:

    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);
        }
    }
    

    5) - Cho phép bật/tắt bộ nhớ đệm của phiên bản cụ thể; Tắt nó trong thời gian chạy cũng xóa bộ đệm liên quan đến thể hiện

Yêu cầu

• Angular ^8.0.0