如何从 Angular 8+ 中的字符串呈现模板？

Question

我想写一个博客系统，作者可以在其中插入一些自定义角度组件到他们的帖子中，如下所示：

<p><b>Please solve this task!</b></p>
<task question="How much is 2+4?" answer="6"></task>

因此任务组件会显示问题，以及用于检查用户答案的​​输入标签。

我找到了一篇关于此的博客文章，但它似乎不支持输入绑定：https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html

我可以只拥有静态属性，但我必须找到一种将数据传递给嵌入式组件的方法。

还有一个很好的解决方案，称为 ng-dynamic，但它不再维护，我无法让它工作：https://www.npmjs.com/package/ng-dynamic

Answer 1

我按照此页面上的说明进行操作：https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html 问题是我无法使用 @Input 属性读取属性。相反，我使用 elementRef 来读取输入：

import {Component, ElementRef, Input, OnInit} from '@angular/core';

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
})
export class TestComponent implements OnInit {
  constructor( private elementRef: ElementRef) {
    let el: HTMLElement = this.elementRef.nativeElement;
    console.log(el.getAttribute("question"));
    this.question = el.getAttribute("question");
    this.answer = el.getAttribute("answer");
  }

  @Input() question;
  @Input() answer;
  isHidden = false;

  ngOnInit() {
  }
}

我还是不知道如何使用内容投影。