具有动态模板或templateUrl的Angular 2/4组件 [英] Angular 2/4 component with dynamic template or templateUrl

问题描述

我一直在努力寻找解决方案.

I have been trying to find a solution for this everywhere.

我有一个具有不同皮肤"的项目，这些皮肤基本上是不同的模板/Css集.

I have a project with different 'skins', which are basically different sets of templates/Css.

我正在尝试让我的组件基于变量THEME_DIR使用皮肤.

I am trying to have my components use the skin based on a variable THEME_DIR.

不幸的是，我找不到实现该目标的方法.我在angular.io上查看了动态组件加载程序.

Unfortunately, I cannot find how to make that happens. I looked into the Dynamic Component Loader on angular.io without success.

我也在这里查看了一些没有成功的答案.

I also looked at a few answers here without success either.

有人有主意吗?

这是我到目前为止尝试过的:

This is what I tried so far:

import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';

// @Component({
//     templateUrl: '../../assets/theme/'+THEME_DIR+'/login.template.html',
// })

export class LoginComponent implements, AfterViewInit {


    private log = Log.create('LoginPage');

    constructor(private mzksLsRequestService: MzkLsRequestService,
                private componentFactoryResolver: ComponentFactoryResolver,
                public viewContainerRef: ViewContainerRef) {
    }



    ngAfterViewInit() {
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(new Component({
            templateUrl: '../../assets/theme/default/login.template.html',
        }));
        let viewContainerRef = this.viewContainerRef;
        viewContainerRef.clear();
        let componentRef = viewContainerRef.createComponent(componentFactory);

    }

}

推荐答案

您可以这样做:

import {
  Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef,
  ViewContainerRef
} from '@angular/core';


@Component({
  selector: 'my-app',
  template: `
      <h1>Hello {{name}}</h1>
      <ng-container #vc></ng-container>
  `
})
export class AppComponent {
  @ViewChild('vc', {read: ViewContainerRef}) vc;
  name = `Angular! v${VERSION.full}`;

  constructor(private _compiler: Compiler,
              private _injector: Injector,
              private _m: NgModuleRef<any>) {
  }

  ngAfterViewInit() {
    const tmpCmp = Component({
        moduleId: module.id, templateUrl: './e.component.html'})(class {
    });
    const tmpModule = NgModule({declarations: [tmpCmp]})(class {
    });

    this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
      .then((factories) => {
        const f = factories.componentFactories[0];
        const cmpRef = f.create(this._injector, [], null, this._m);
        cmpRef.instance.name = 'dynamic';
        this.vc.insert(cmpRef.hostView);
      })
  }
}

只需确保URL正确并将模板加载到客户端即可.

Just make sure that the URL is correct and the template is loaded into the client.

阅读此处这是您需要了解的有关Angular中动态组件的信息以获取更多详细信息.

Read Here is what you need to know about dynamic components in Angular for more details.

这篇关于具有动态模板或templateUrl的Angular 2/4组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！