angular - Angular：如何动态加载由字符串定义的组件？

Question

如何编译由字符串定义的组件并将其呈现在我的模板中？

我尝试使用DomSanitizer：

this.sanitizer.bypassSecurityTrustHtml(parsedLinksString);

但这并没有正确绑定click事件处理程序onButtonClick()。

所需的功能

@Component({
    selector: 'app-sample-component',
    templateUrl: './sample-component.component.html',
    styleUrls: ['./sample-component.component.scss']
})
export class SampleComponent {

  buildMessage() {
    // How do I parse this string and render so that it responds to events?
    const myOutput = '<button (click)="onButtonClick()';
  }

  onButtonClick() {
    console.log('Handler for Dynamic Button');
  }

}

Answer 1

Angular 安全模型被设计为不处理添加到的 HTML [innerHTML]="myOutput"（即不执行脚本并且不触发事件）。

编译 HTML 的 Angular 选项包括：

将 HTML 添加到组件模板

在您的示例中，HTML 将进入sample-component.component.html. 要在模板中动态包含或排除 HTML，请使用结构指令，例如*ngIf和*ngFor。

创建一个动态组件以在运行时加载

请参阅动态组件加载器

Stackblitz Demo