如何在现有应用程序中添加 Angular 组件 html？答案

【问题标题】：How can I add Angular component html in existing app?如何在现有应用程序中添加 Angular 组件 html？
【发布时间】：2019-09-17 16:06:00
【问题描述】：

我想应用角度组件

import { Component } from '@angular/core'
import { DialogService } from './dialog/dialog.service'

@Component({
  selector: 'app-root',
  templateUrl: '<div></div>',
})
export class AppComponent {
  dialogs: any;
  constructor(public dialogService: DialogService) {
       dialogs = dialogService.getDialogs();

       // dialogs are like following = 
       //   { "id": 1, "name": "D1", component: "<x-component>…</x-component>" },
  }
}

对话框服务获取包含组件 html 的 JSON 数据。如何在现有组件上添加此 (<x-component>) 组件？

【问题讨论】：

标签： angular angular7

【解决方案1】：

将从 JSON 返回的组件分配给一个变量 this.returnedComponent = myComponent

然后在你的 HTML 中放

<div [innerHtml]="returnedComponent"></div>

【讨论】：