动态更改Angular 4组件的模板

Question

使用Angular 4.1，我正在尝试在模块渲染之前动态更改模块类型的模板。这可能吗？

我们正在引导页面上的一个未知数的组件(来自已知的组件类型列表(，并且该页面可能包含同一类型的多个组件。我发现了一种给出每个组件的方法，以便将它们分开渲染(即使它们的类型相同(，但是我还需要给每个模板一个不同的模板。模板应为所选元素的内部HTML。

这是代码：

import { Component, NgModule, Inject, ApplicationRef, ComponentFactoryResolver, OpaqueToken, Type } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyNavComponent } from './MyNav.component';
import { MyRotatorComponent } from './MyRotator.component';
import { MySignUpComponent } from './MySignUp.component';
export const BOOTSTRAP_COMPONENTS_TOKEN = new OpaqueToken('bootstrap_components');
@NgModule({
    imports: [BrowserModule],
    declarations: [
        MyNavComponent,
        MyRotatorComponent,
        MySignUpComponent
    ],
    entryComponents: [
        MyNavComponent,
        MyRotatorComponent,
        MySignUpComponent
    ],
    providers: [
        {
            provide: BOOTSTRAP_COMPONENTS_TOKEN,
            useValue: [
                { type: MyNavComponent },
                { type: MyRotatorComponent },
                { type: MySignUpComponent }
            ]
        },
    ]
})
export class AppModule {
    constructor(
        private resolver: ComponentFactoryResolver,
        @Inject(BOOTSTRAP_COMPONENTS_TOKEN) private components: [Component],
    ) { }
    ngDoBootstrap(appRef: ApplicationRef) {
        console.log(this.components);
        this.components.forEach((componentDef: { type: Type<any>, selector: string }) => {
            const factory = this.resolver.resolveComponentFactory(componentDef.type);
            let selector = factory.selector;
            let nodes = document.querySelectorAll(selector);
            for (let i = 0; i < nodes.length; i++) {
                let node = nodes[i];
                (<any>factory).factory.selector = node;
                //The next line doesn't work... how can I dynamically set the template?
                (<any>factory).factory.template = node.innerHTML;
                appRef.bootstrap(factory);
            }
        });
    }
}

如上述代码末尾所述，(<any>factory).factory.template = node.innerHTML;不起作用。我还尝试过修改类型的元数据，但这也不起作用。

我试图通过另一种方式实现的目标？如果不是，这值得作为功能请求提交？

(注意：以上代码部分基于https://github.com/angular/angular/angular/issues/7136的其他代码。(

更新：

我想知道，在Angular的将来更新中，我是否能够通过将模板设置为<ng-content></ng-content>来获得相同的结果，以包括所选元素的InnerHTML。现在可以使用自举组件，但是基于Git上的这个问题，我希望它会很快。

Answer 1

创建组件工厂后无法为模板设置模板。Angular编译器解析模板生成工厂时，并为每个组件创建一个视图类。在创建组件工厂及其视图类之后，您将无法修改它。在您的示例中，您正在使用ComponentFactoryResolver

const factory = this.resolver.resolveComponentFactory(componentDef.type);

返回已经创建的工厂。

唯一的选择是在编译器生成工厂之前更改模板。但是我认为这是不可能的。您可能必须看一下动态的组件。

在这里阅读是您需要了解的有关Angular中动态组件的信息。