带有动态模板或 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 上查看了 Dynamic Component Loader 没有成功.

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.

有人有想法吗?

这是我目前尝试过的:

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屋！