typescript - Angular 2/4 komponent med dynamisk template eller templateUrl

Jeg har prøvd å finne en løsning på dette overalt.

Jeg har et prosjekt med forskjellige 'skins', som i utgangspunktet er forskjellige sett med maler/CSS.

Jeg prøver å få komponentene mine til å bruke skinnet basert på en variabel THEME_DIR.

Dessverre kan jeg ikke finne ut hvordan man får det til å skje. Jeg har sett på Dynamic Component Loader på angular.io uten hell.

Jeg så også på noen få svar her uten hell.

Har noen en idé?

Dette er hva jeg har prøvd så langt:

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);

    }

}

Svar #1

Du kan gjøre det på denne måten:

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);
      })
  }
}

Bare sørg for at URL-en er korrekt og at malen er lastet inn i klienten.

Les Her er det du trenger å vite om dynamiske komponenter i Angular for mer informasjon.

Relaterte artikler