Question

我现在正在开发一个平台，供用户动态（由内置组件组成）“添加和编辑自定义页面”。

我的想法是：
1.用户单击添加页面按钮。
2.后端生成一个.ts文件，例如：

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

@Component({
  selector: 'app-added-page1',
  template: '<h1>hello!</h1>'
})
export class AddedPage1 implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

3.用户使用Web IDE编辑布局并编辑.ts文件，

@Component({
  selector: 'app-added-page1',
  template: '
      <h1>my table</h1>
      <button (click)="onRefresh()"> refresh </button>
      <my-table [data]="_data"></my-table>
'
})
export class AddedPage1 implements OnInit {
  _data = [];
  constructor() { }
  ngOnInit() {
  }
  onRefresh(){
    _data = [1,2,3,4,5];
  }
}

4.当用户单击“保存”时，后端会将所有内容保留在数据库中。

那么，问题来了，有可能在Angular中动态加载此组件（'AddedPage1'）吗？

我发现一些有关使用'ViewContainerRef'和'ComponentFactoryResolver'（ref）的主题。但是这种方法似乎仅适用于现有组件（在编译之前）。

我正在使用Angular 7.2.11。
任何经验或方向将不胜感激！

是否可以从Angular2的“纯文本”中动态加载组件模板？

0 个答案: