Kết xuất html động Góc

Các thành phần động trong Angular rất mạnh mẽ và giúp bạn giải quyết các vấn đề khó khăn nhất. Trong ví dụ này, chúng ta sẽ tìm hiểu cách chúng ta có thể tận dụng các thành phần Góc động để hiển thị HTML của cửa sổ bật lên được điều khiển bởi bản đồ Tờ rơi. Chúng ta sẽ đi từng bước một và cũng tìm hiểu về những điều bạn cần lưu ý khi khởi tạo động các thành phần

Show

Nội dung dựa trên phiên bản Angular >= 4. 0. 0



Trường hợp sử dụng

Hôm qua tôi đã nhận được một câu hỏi từ một người tham dự hội thảo trước đây về cách giải quyết một vấn đề nhất định trong Angular. Anh ấy sử dụng bản đồ Tờ rơi trong thành phần của mình, nơi anh ấy muốn hiển thị một loạt các điểm đánh dấu, khi nhấp vào chúng, sẽ mở một cửa sổ bật lên hiển thị một số HTML

Kết xuất html động Góc
Kết xuất HTML bật lên đánh dấu với các thành phần Góc

Do HTML bật lên có thể trở nên phức tạp tùy ý, rõ ràng anh ấy muốn có một thành phần Angular chịu trách nhiệm hiển thị nó và cập nhật HTML cho phù hợp bất cứ khi nào dữ liệu thay đổi. Giống như bạn thường mong đợi khi xử lý các thành phần Góc

Bây giờ, điều quan trọng cần biết là việc đặt các điểm đánh dấu cũng như hiển thị HTML bên trong được ủy quyền cho API Tờ rơi. Điều này trông giống như thế này

import { marker } from 'leaflet';

const marker = marker(latLngPosition);
const popupContent = `Hi, some HTML here`;

marker.bindPopup(popupContent).openPopup();

marker.addTo(map);

Tôi không phải là chuyên gia về Tờ rơi nên có thể có nhiều cách tiếp cận khác nhau để đạt được điều đó, nhưng bạn nên hiểu ý. Như bạn có thể thấy, popupContent là một chuỗi HTML nào đó, đây là chuỗi sẽ xuất phát từ thành phần Góc của chúng ta.
Vấn đề là vì Leaflet xử lý toàn bộ quá trình hiển thị HTML, nên đó không phải là điều mà Angular “biết” về và do đó chúng ta không thể chỉ cần thêm một thành phần vào chuỗi HTML và nó sẽ hoạt động bình thường. .

phương pháp tiếp cận giải pháp

Tất nhiên bây giờ có nhiều cách tiếp cận khác nhau để giải quyết vấn đề này. Trước tiên, bạn có thể chỉ cần xử lý kết xuất HTML trong mã JavaScript của mình, thông qua một số chuỗi mẫu “thông minh”. Bất cứ khi nào dữ liệu thay đổi, bạn có thể nhận được thông báo qua một số đăng ký Có thể quan sát và đảm bảo rằng bạn tạo lại HTML và cập nhật điểm đánh dấu theo trên bản đồ

Tuy nhiên, trong bài viết này, mục đích của chúng tôi là tìm hiểu về các thành phần động và cách chúng tôi có thể ủy quyền toàn bộ kết xuất HTML và liên kết dữ liệu cho Angular. Vì vậy, hãy xem

Bước 1. Tạo thành phần động của chúng tôi

Trước tiên, hãy tạo thành phần chịu trách nhiệm hiển thị dữ liệu được hiển thị bên trong thông báo bật lên. Nó thực sự là một thành phần khá đơn giản lấy dữ liệu của nó thông qua một

import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
0

import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }

Bước 2. Đăng ký thành phần động

Các thành phần động cần được đăng ký trong thuộc tính

import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
1 của
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
2

import { NgModule } from '@angular/core';
...
import { HTMLMarkerComponent } from './html-marker.component';

@NgModule({
  ...
  entryComponents: [HTMLMarkerComponent],
  ...
})
export class AppModule { }

Bước 3. Tự động khởi tạo HTMLMarkerComponent của chúng tôi

Khi chúng tôi đã đăng ký thành phần của mình, chúng tôi có thể bắt đầu và khởi tạo nó. Nếu bạn muốn tìm hiểu thêm về các thành phần động, bạn chắc chắn cũng nên xem qua bài viết này

Tìm hiểu về các chủ đề nâng cao chẳng hạn như thành phần động, ComponentFactoryResolver, ViewContainerRef, ngTemplateOutlet và hơn thế nữa

CẬP NHẬT. Ngay sau khi viết bài viết này, tôi đã xem một bài viết khác từ Netanal Basal nói về chủ đề tương tự nhưng sử dụng Các yếu tố góc. Anh ấy là một chuyên gia lâu đời về Angular và các framework front-end khác. Kỹ thuật của anh ấy cũng hiệu quả đối với các chỉ thị; . Vì vậy, hãy thử cách tiếp cận của anh ấy trước — có vẻ thú vị

Giới thiệu

Giả sử, bạn có một tập hợp các thành phần được xác định trong ứng dụng Angular của mình, <your-component-1> <your-component-2> <your-component-3> .... Sẽ không tuyệt sao nếu bạn có thể tạo các mẫu độc lập bao gồm <your-components> và các “Cú pháp góc” khác (Đầu vào, Đầu ra, Nội suy, Chỉ thị, v.v. ), tải chúng trong thời gian chạy từ back-end và Angular sẽ hiển thị tất cả chúng — tất cả <your-components> được tạo và tất cả các cú pháp Angular được đánh giá? . ?

Bạn không thể có mọi thứ, nhưng ít nhất một cái gì đó sẽ hoạt động

than ôi. chúng ta phải chấp nhận thực tế là Angular không hỗ trợ kết xuất các mẫu một cách linh hoạt. Ngoài ra, có thể có một số cân nhắc về bảo mật. Hãy chắc chắn rằng bạn hiểu những yếu tố quan trọng này đầu tiên

Nhưng mọi thứ chưa hẳn đã mất. Vì vậy, chúng ta hãy khám phá một cách tiếp cận để đạt được, ít nhất, một tập hợp con nhỏ nhưng quan trọng của việc hỗ trợ hiển thị mẫu động. HTML động chứa các Thành phần góc, như tiêu đề của bài viết này gợi ý

Ghi chú thuật ngữ

  1. Các thuật ngữ “HTML động” hoặc “mẫu động” hoặc “HTML mẫu động” được sử dụng khá thường xuyên trong bài viết này. Tất cả đều có nghĩa giống nhau. mô tả về "mẫu độc lập" trong phần giới thiệu ở trên
  2. Thuật ngữ “các thành phần động” có nghĩa là tất cả <your-components> được đặt/sử dụng trong một HTML động;
  3. “Thành phần máy chủ”. Đối với một thành phần hoặc thành phần được chiếu trong HTML động, Thành phần máy chủ của nó là thành phần đã tạo ra nó, e. g. trong ý chính “HTML động mẫu” bên dưới, Thành phần máy chủ của
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    1 là thành phần sẽ tạo HTML động đó, không phải
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    2 bên trong mà
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    1 được đặt trong HTML động
Kiến thức tiên quyết

Là điều kiện tiên quyết để hiểu đầy đủ về giải pháp được đề xuất, tôi khuyên bạn nên có ý tưởng về các chủ đề sau nếu chưa biết về chúng

  1. Trình tải thành phần động sử dụng ComponentFactoryResolver
  2. Chiếu nội dung trong góc - chọn bài viết yêu thích của bạn từ Google
Các thành phần động mẫu

Hãy để chúng tôi xác định một số <your-components> mà chúng tôi sẽ sử dụng trong “mẫu HTML động” mẫu của chúng tôi trong phần tiếp theo

Các thành phần động mẫu

Hãy xem nhanh

import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
5, các bình luận chống lại
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
6, <your-components>0 và <your-components>1. Điều này chuyển thành hạn chế đầu tiên của giải pháp đề xuất của tôi. một thuộc tính <your-components>2 phải được khởi tạo thành giá trị <your-components>3. Có hai phần ở đây

  1. Đầu vào phải thuộc loại <your-components>3. Tôi áp đặt hạn chế này vì giá trị của bất kỳ thuộc tính nào của Phần tử HTML trong HTML động sẽ thuộc loại <your-components>5. Vì vậy, tốt hơn hết là giữ cho các kiểu dữ liệu đầu vào của các thành phần của bạn nhất quán với kiểu dữ liệu của giá trị mà bạn sẽ đặt trên chúng
  2. Đầu vào phải được khởi tạo. Mặt khác, Bản mô tả loại bỏ thuộc tính đó trong quá trình dịch mã, điều này gây ra sự cố cho <your-components>6 (xem phần giải pháp sau) — nó không thể tìm thấy thuộc tính đầu vào của thành phần đó trong thời gian chạy, do đó sẽ không đặt thuộc tính đó ngay cả khi HTML động có HTML thích hợp
HTML động mẫu

Chúng ta cũng hãy định nghĩa một HTML động. Tất cả các cú pháp được đề cập ở đây sẽ hoạt động. Mọi cú pháp góc KHÔNG được đề cập ở đây sẽ không được hỗ trợ

HTML động mẫu

Hãy để tôi làm rõ lại hạn chế thứ hai của giải pháp đề xuất của tôi. không hỗ trợ cho Chỉ thị, Đường ống, phép nội suy, liên kết dữ liệu hai chiều, liên kết dữ liệu [biến], ng-template, ng-container, v.v. trong một HTML mẫu động

Để làm rõ thêm về hạn chế “<your-components>7 string”, chỉ các giá trị chuỗi được mã hóa cứng mới được hỗ trợ, tôi. e. không có biến như <your-components>8. Điều này là do, để hỗ trợ liên kết đối tượng như vậy, chúng tôi cần phân tích cú pháp các thuộc tính HTML và đánh giá giá trị của chúng trong thời gian chạy. Nói dễ hơn làm

Các lựa chọn thay thế cho cú pháp không được hỗ trợ

  1. Chỉ thị.
    Nếu bạn thực sự muốn sử dụng một chỉ thị thuộc tính, thì giải pháp thay thế tốt nhất ở đây là tạo một <your-components>9 để thay thế. Nói cách khác, bạn có thể tạo thành phần của mình bằng bất kỳ bộ chọn nào được hỗ trợ bởi Góc — bộ chọn <your-components>0, bộ chọn <your-components>1, bộ chọn <your-components>2 hoặc thậm chí là sự kết hợp của chúng, e. g. <your-components>3.
  2. Ràng buộc dữ liệu đối tượng/biến, phép nội suy, v.v.
    Khi bạn đính kèm HTML động của mình vào DOM, bạn có thể dễ dàng tìm kiếm thuộc tính đó bằng cách sử dụng <your-components>4 hoặc <your-components>5 và đặt giá trị của nó trước khi tạo các thành phần. Ngoài ra, bạn có thể tự thao tác với chuỗi HTML trước khi gắn nó vào DOM. (Điều này sẽ trở nên rõ ràng hơn trong phần tiếp theo. )
Đính kèm HTML mẫu động vào DOM

Đã đến lúc cung cấp HTML động trong DOM. Có nhiều cách để đạt được điều này. sử dụng chỉ thị thuộc tính <your-components>6, <your-components>7, <your-components>8, v.v. Đoạn mã dưới đây cung cấp một vài ví dụ đăng ký một <your-components>9 đại diện cho một luồng HTML mẫu và đính kèm nó vào DOM theo độ phân giải

Đang tải HTML động cho thành phần trong thời gian chạyNhà máy kết xuất thành phần động

Chúng ta cần đạt được điều gì ở đây?

  1. Tìm các phần tử HTML của Thành phần trong DOM (của HTML động)
  2. Tạo các Thành phần góc thích hợp và đặt thuộc tính <your-components>7 của chúng
  3. Nối chúng vào ứng dụng Angular

Đó chính xác là những gì <your-components>1 làm dưới đây

Nhà máy linh kiện động

Tôi hy vọng rằng mã và nhận xét là tự giải thích. Vì vậy, hãy để tôi chỉ đề cập đến một số phần cần giải thích thêm

  1. <your-components>2. Đây là trung tâm của giải pháp này — API do Angular cung cấp để tạo thành phần theo mã
  2. Đối số đầu tiên <your-components>3 được yêu cầu bởi Angular để đưa các phụ thuộc vào các thể hiện đang được tạo
  3. Đối số thứ hai <your-components>4 là một mảng gồm tất cả “Nút có thể chiếu” của thành phần sẽ được tạo, e. g. trong ý chính “HTML động mẫu”, <your-components>5 và <your-components>6 là các nút có thể chiếu của
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    2. Nếu đối số này không được cung cấp, thì các Nút bên trong
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    2 này sẽ không được hiển thị trong chế độ xem cuối cùng
  4. <your-components>6. Hàm này lặp qua tất cả các thuộc tính công khai của phiên bản của thành phần đã tạo và đặt giá trị của chúng thành giá trị của các thuộc tính tương ứng của Phần tử máy chủ
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    10, nhưng chỉ khi được tìm thấy, nếu không thì đầu vào sẽ giữ giá trị mặc định được xác định trong thành phần
  5. import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    11. Điều này làm cho Angular nhận thức được các thành phần được tạo và đưa chúng vào chu kỳ phát hiện thay đổi của nó
  6. import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    12. Angular sẽ không tự động loại bỏ bất kỳ thành phần nào được tạo động cho chúng tôi. Do đó, chúng ta cần thực hiện điều đó một cách rõ ràng khi Thành phần máy chủ đang bị hủy. Trong ví dụ hiện tại của chúng tôi, Thành phần máy chủ của chúng tôi sẽ được giải thích trong phần tiếp theo
  7. Lưu ý rằng
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    14 chỉ hoạt động với một loại thành phần
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    15 trên mỗi phiên bản của lớp nhà máy đó. Vì vậy, để liên kết nhiều loại Thành phần, bạn phải tạo nhiều phiên bản xuất xưởng như vậy cho mỗi Loại Thành phần. Để làm cho quá trình này dễ dàng hơn, chúng tôi sử dụng lớp
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    16. (Xin lỗi, không thể nghĩ ra một cái tên tốt hơn. ) Ngoài ra, lý do khác để có lớp bao bọc này là bạn không thể tiêm trực tiếp
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    17 của Angular, đây là phần phụ thuộc hàm tạo thứ hai của
    import { Component, Input, OnInit } from '@angular/core';
    import { DataService } from './data.service';
    
    @Component({
      selector: 'html-marker',
      template: `
        

    {%raw%}{{ data.name }}%{%endraw%}

    {%raw%}{{ data.description }}{%endraw%}

    ` }) export class HTMLMarkerComponent { @Input() data; }
    14. (Phải có cách tốt hơn để quản lý quá trình tạo nhà máy. Mở để đề xuất. )

Bây giờ chúng tôi đã sẵn sàng sử dụng lớp nhà máy này để tạo các thành phần động

Tạo các thành phần góc trong HTML động

Cuối cùng, chúng tôi tạo các phiên bản của

import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
14 cho mỗi loại "thành phần động" bằng cách sử dụng
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
16 và gọi các phương thức
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
21 của chúng trong vòng lặp, trong đó
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
22 là Nút HTML chứa HTML động. Chúng tôi cũng có thể thực hiện các thao tác “khởi tạo” tùy chỉnh trên các thành phần mới được tạo. Xem Dòng 55–65

Mã cuối cùng về cách sử dụng nhà máy thành phần để liên kết các thành phần trong thời gian chạy

Nhà cung cấp DynamicComponentFactoryFactory (Quan trọng. )

Lưu ý trong

import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
13 rằng
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
16 đã được cung cấp trong bộ trang trí
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
25 của riêng nó và được tiêm bằng cách sử dụng
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
26. Như đã đề cập trong các nhận xét JSDoc của nó, điều này rất quan trọng vì chúng tôi muốn sử dụng đúng phiên bản của
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
27 để tạo các thành phần một cách linh hoạt. Nếu lớp nhà máy không được cung cấp ở cấp Thành phần máy chủ và thay vào đó là
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
28 hoặc một số
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
29, thì phiên bản
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
27 sẽ ở cấp đó, điều này có thể gây ra những hậu quả không lường trước được, e. g. liên kết tương đối trong
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
11 được sử dụng trong, ví dụ,
import { Component, Input, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'html-marker',
  template: `
    

{%raw%}{{ data.name }}%{%endraw%}

{%raw%}{{ data.description }}{%endraw%}

` }) export class HTMLMarkerComponent { @Input() data; }
12 có thể không hoạt động chính xác

Đó là nó

Sự kết luận

Nếu bạn đã làm được đến đây, có thể bạn đang nghĩ, “Meh. Đây là phiên bản rút gọn hoàn toàn các khả năng của mẫu Angular. Điều đó không tốt cho tôi. ”. Vâng, tôi sẽ không phủ nhận điều đó. Nhưng, tin tôi đi, nó vẫn là một thứ “tăng sức mạnh”. Tôi đã có thể tạo một Trang web chính thức hiển thị các mẫu động, do người dùng xác định bằng cách sử dụng phương pháp này và nó hoạt động hoàn toàn tốt

Mặc dù chúng tôi không thể hiển thị các mẫu động được tải đầy đủ trong thời gian chạy, nhưng chúng tôi đã thấy trong bài viết này cách chúng tôi có thể hiển thị ít nhất “các thành phần có đầu vào chuỗi tĩnh”. Đây có vẻ như là một giải pháp bị tê liệt, khi so sánh với tất cả các tính năng tuyệt vời mà Angular cung cấp tại thời điểm biên dịch. Tuy nhiên, trên thực tế, điều này vẫn có thể giải quyết được nhiều trường hợp sử dụng yêu cầu hiển thị mẫu động

Hãy coi đây là một phần thành công

Hy vọng bạn thấy bài viết hữu ích

Tín dụng cho nhận xét GitHub này hoạt động như cơ sở của giải pháp này. Ngoài ra, tôi đã đọc trong đó, một vài nhận xét sau đó, rằng kỹ thuật này cũng được sử dụng bởi góc cạnh. trang web tài liệu io. Điều đó thực sự thúc đẩy sự tự tin của tôi. r. t. tính xác thực của kỹ thuật này

Làm thế nào góc kết xuất HTML?

Để hiển thị một chuỗi html ở dạng góc, chúng ta có thể sử dụng thuộc tính innerHTML bằng cách liên kết một chuỗi với nó . Thuộc tính innerHTML làm sạch html để ứng dụng của bạn an toàn trước các cuộc tấn công tập lệnh chéo trang (XSS).

Chúng ta có thể tạo thành phần động trong Angular không?

Nếu chúng ta đi theo định nghĩa của Angular, một thành phần của nhà máy thì Angular là một lớp cơ sở cho một nhà máy có thể tự động tạo một thành phần . Khởi tạo một nhà máy cho một loại thành phần nhất định với giải quyếtComponentFactory(). Sử dụng kết quả ComponentFactory. phương thức create() để tạo một thành phần thuộc loại đó.

Năng động trong Angular là gì?

Động có nghĩa là vị trí thành phần trong ứng dụng không được xác định tại thời điểm xây dựng . Điều đó có nghĩa là nó không được sử dụng trong bất kỳ mẫu góc nào. Thay vào đó, thành phần được khởi tạo và đặt trong ứng dụng khi chạy.

Các thành phần góc được hiển thị như thế nào?

Angular cung cấp cho chúng tôi cơ chế để kết xuất linh hoạt các thành phần thông qua Vùng chứa Chế độ xem bằng cách sử dụng ComponentFactory . Để làm điều này, chúng ta cần biết Loại thành phần tại thời điểm biên dịch. Cơ chế hiển thị thành phần động nhất sẽ là cơ chế mà chúng ta không biết thành phần nào sẽ được hiển thị tại thời điểm biên dịch.