如何在组件内部创建angular模块?

Question

我想在另一个组件中动态创建一个组件。这样我就可以把我的动态html模板直接传递给装饰器，像这样@Component({模板:模板});

//代码

/**
* @param template is html template
* @param container is  @ViewChild('dynamicFront', { read: ViewContainerRef }) _containerFront: ViewContainerRef;
*/
private addComponent(template, container) {
@Component({
template: template
})
class DynamicComponent {
constructor(public _parent: TemplateEditorComponent) {
this._parent.templateForm.controls['field_heading'].valueChanges.subscribe(value => {
console.log(value);
})
}
}
@NgModule({
imports: [
ReactiveFormsModule,
BrowserModule,
EditorModule
],
declarations: [DynamicComponent, EditableDivDirective, InlineEditorDirective]
})
class DynamicComponentModule { }
const mod = this.compiler.compileModuleAndAllComponentsSync(DynamicComponentModule);
const factory = mod.componentFactories.find((comp) =>
comp.componentType === DynamicComponent
);
const component = container.createComponent(factory);
}

在HTML组件中，我像这样显示模板

<ng-template #dynamicFront></ng-template>

我得到一些构建错误，如template不是字符串和所有。目标是显示我的原始html来自数据库，我需要在这个原始html模板中编辑文本，我使用tinymce在这个原始html中进行编辑。

Answer 1

如果你的组件模板需要是动态的，你应该使用<ng-template>或带有输入和输出的嵌入式组件。

如果你不清楚ng-template指令，这里有一个教程。

编辑:

---

对于一个简单的用例来说，你的代码相当复杂。如果你想做的只是根据控制器中的数据呈现不同的模板，那么你应该把重点放在构建现有模板上，使其更加动态。

<ng-container *ngIf="template == 1" 
[ngTemplateOutlet]="template1" 
[ngTemplateOutletContext]="{value: value}">
</ng-container>
<ng-container *ngIf="template == 2" 
[ngTemplateOutlet]="template2" 
[ngTemplateOutletContext]="{value: value}">
</ng-container>
...
<ng-template #template1 let-value="value">
<div class="template-1-container">
{{value}}
</div>
</ng-template>
<ng-template #template2 let-value="value">
<div class="template-2-container">
{{value}}
</div>
</ng-template>

如果你需要模板来执行一些逻辑，你可以很容易地用组件替换模板:

<app-template-one *ngIf="template == 1"
[value]="value">
</app-template-one>
<app-template-two *ngIf="template == 1"
[value]="value">
</app-template-two>