您基本上尝试做的是在动态加载的字符串中动态加载组件。 Angular 渲染引擎处理内联或单独在 HTML 文件中提供的任何模板。 （Ivy 是从 Angular 9 开始的新优化渲染引擎，从 Angular 4 到 8 默认渲染引擎称为 Renderer2，它是 Renderer 的继承者，从 Angular 2 到默认4).
这基本上就是您在附加的 stackBlitz 中尝试做的事情，
@ViewChild("dynamicComponent", { static: false, read: ViewContainerRef }) myRef: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {
//Simulate the network call
setTimeout(() => {
this.htmlChildString = `<ng-template #dynamicComponent></ng-template>`;
}, 2000);
}
ngAfterViewInit(): void {
const factory = this.componentFactoryResolver.resolveComponentFactory(
ChildViewComponent
);
const ref = this.myRef.createComponent(factory);
ref.changeDetectorRef.detectChanges();
}
这里的第一件事是错误的显然ngAfterViewInit将在constructor中编写的setTimeout方法之前被调用，因为你定义了2000ms的超时时间，所以myRef将永远是未定义的，因为它尚未实例化，我看到的下一个问题是关于您的模板，
<div [innerHTML]="htmlChildString"></div>
innerHTML 不应该包含任何角度符号，它只能包含可以直接嵌入到 DOM 中的纯 HTML，因为它们不会被 Angular 渲染引擎处理，这正是 @Andriy 已经指出。
现在来看看您尝试的原因是不可能的，假设您定义了一个名为 AComponent 的组件具有模板：
<span>I am {{name}}</span>
angular 编译器，当遍历每个（静态定义的）组件和附加到这些组件的模板时，它会为每个组件创建工厂。当 Angular 编译器通过上述模板时，它会生成如下所示的工厂，
function View_AComponent_0(l) {
return jit_viewDef1(0,
[
jit_elementDef2(0,null,null,1,'span',...),
jit_textDef3(null,['I am ',...])
],
null,
function(_ck,_v) {
var _co = _v.component;
var currVal_0 = _co.name;
_ck(_v,1,0,currVal_0);
注意下一行？
jit_elementDef2(0,null,null,1,'span',...),
Angular 正在做的是使用 JS 来创建元素，Angular 使用这个工厂来实例化视图定义，而视图定义又用于创建组件视图。在引擎盖下，Angular 将应用程序表示为视图树。每个组件类型只有一个视图定义实例，它充当所有视图的模板。但是对于每个组件实例，Angular 都会创建一个单独的视图。
上述工厂描述了组件视图的结构，并在实例化组件时使用。 jit_viewDef1 是对创建视图定义的viewDef 函数的引用。
视图定义接收视图定义节点作为参数，这些参数类似于 html 的结构，但也包含许多角度特定的细节。
这个工厂是从 resolveComponentFactory 方法返回的，因为你已经在你的模块中静态声明了 ChildViewComponent 并将它标记为 entryComponent，这就是 angular 决定预先生成它的工厂的原因，即使它知道它当前没有被路由器或其他组件的模板使用。
类似地，ViewContainerRef 是对视图容器（ng-template 或 ng-container）的引用，它必须直接在模板中静态定义，或者应该通过 ngSwitch 或 @ 的组合遇到987654347@ 指令，但在任何情况下，编译器/渲染引擎都必须在编译时事先知道该容器的存在。
在您通过 API 动态加载这些角度符号的情况下，角度只知道这是一个简单的字符串，并且事先不知道这是可以在运行时包含视图的东西。如果你看过 Angular 生成的构建，它只包含 JS 文件，没有与你的组件对应的 HTML 模板或 CSS 样式文件。这些 HTML 文件中包含的每个模板都会转换为最终在运行时使用的工厂方法。
我建议你这样做，
- 要么仅通过其余 API 加载纯 HTML 内容，然后将所有 Angular 特定符号拉入您的 Angular 应用程序并有条件地加载它们，
例如看看这个stackBlitz，里面没有开箱即用的东西，它只是使用CDK Portal，它基本上只是对
resolveComponentFactory和createComponent方法的抽象，以及一个静态定义的templateRef，它是动态的点击按钮即可加载到viewContainerRef。
- 或者创建另一个 JS 或 Angular 应用程序，然后将
ChildViewComponent 拉入其中，如果需要，让 iframe 根据任何条件加载内容，
- 加载模板的编译版本，类似于 Angular lazy 加载其模块的方式，以及一些如何以编程方式将其加载到路由器插座中。我不知道这是否可能，这只是我心中的一个想法，但我不希望这是直截了当的。