Url de plantilla dinámica en Angular 2

Mi solución:

Angular 2.0 ViewResolver Class

class myViewResolver extends ViewResolver{
    resolve(component: Type): ViewMetadata {        
        var view =  super.resolve(component);
        // TODO: Write logic here:-)
        view.templateUrl = 'app/app.html';
        return view;
    }
}
bootstrap(App,[
    provide(ViewResolver , {useClass:myViewResolver})
]);

No es exactamente lo que pediste, pero vale la pena mencionarlo:

Otra solución simple, que funciona para la mayoría de los casos de uso, es poner la lógica en la propia plantilla, así:

@Component({
  selector: 'my-component'
})
@View({
// Note1: Here, I use template instead of templateUrl.
// Note2: I use ES6 string interpolation + require() to embed/load the other templates, but you can do it however you like.
  template: `
    <div [ngSwitch]="loggedIn">
      <template [ngSwitchCase]="true"> ${require('./logged-in.html')} </template>
      <template ngSwitchDefault> ${require('./logged-out.html')} </template>
    </div>`
})
class MyComponent {
  constructor() {
    this.loggedIn = false;
  }
}

La desventaja de esta solución es que su archivo js servido termina conteniendo ambas plantillas, por lo que esto podría ser un problema para las plantillas grandes (pero solo una plantilla se renderiza realmente y la sobrecarga de tamaño js es aceptable en muchos casos).

Mi solución:(La belleza de esto es la carga lenta para archivos html y css.)

Este es el hogar.componenet.ts

import { Component } from '@angular/core';
import { DynamicHTMLOutlet } from './../../directives/dynamic-html-outlet/dynamicHtmlOutlet.directive';
import { TranslateService, LangChangeEvent } from 'ng2-translate/ng2-translate';

@Component({
  selector: 'lib-home',
  templateUrl: './app/content/home/home.component.html',
  directives: [DynamicHTMLOutlet]
})
export class HomeComponent {
  html_template = `./app/content/home/home_`;
  html: string;
  css: string;
  constructor(translate: TranslateService) {
        this.html = this.html_template + translate.currentLang;
        this.css = './app/content/home/home.component.css';
    translate.onLangChange.subscribe((event: LangChangeEvent) => {
          this.html = this.html_template + translate.currentLang;
          this.css = './app/content/home/home.component.css';
    });
  }

 }

La directiva que utilicé e hice algunos cambios: Esto es en casa.componenet.html

<dynamic-html-outlet [htmlPath]="html" [cssPath]="css"></dynamic-html-outlet>

Esta es la directiva para componentes dinámicos:

import {
  Component,
  Directive,
  ComponentFactory,
  ComponentMetadata,
  ComponentResolver,
  Input,
  ReflectiveInjector,
  ViewContainerRef,

} from '@angular/core';
import { TranslatePipe } from 'ng2-translate/ng2-translate';
declare var $:any;

export function createComponentFactory(resolver: ComponentResolver, metadata: ComponentMetadata): Promise<ComponentFactory<any>> {
    const cmpClass = class DynamicComponent {};
    const decoratedCmp = Component(metadata)(cmpClass);
    return resolver.resolveComponent(decoratedCmp);
}

@Directive({
    selector: 'dynamic-html-outlet',
})
export class DynamicHTMLOutlet {
  @Input() htmlPath: string;
  @Input() cssPath: string;

  constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
  }

  ngOnChanges() {
    if (!this.htmlPath) return;
    $('dynamic-html') && $('dynamic-html').remove();
    const metadata = new ComponentMetadata({
        selector: 'dynamic-html',
        templateUrl: this.htmlPath +'.html',
        styleUrls:  [this.cssPath],
        pipes: [TranslatePipe]
    });
    createComponentFactory(this.resolver, metadata)
      .then(factory => {
        const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
        this.vcRef.createComponent(factory, 0, injector, []);
      });
  }
}

Actualización de la respuesta de @Eyal Vardi (ViewResolver está obsoleta):

import { Directive, Type, Component } from '@angular/core';
import { DirectiveResolver } from '@angular/compiler';

class myViewUrlResolver extends DirectiveResolver {
    resolve(type: Type<any>, throwIfNotFound?: boolean): Directive {        
        let view = <any>super.resolve(type, throwIfNotFound);
        if (typeof view["templateUrl"] !== "undefined") {
            console.log("Yay!");
            let originalUrl = (<Component>view).templateUrl;
            (<Component> view).templateUrl = environment.nativeScriptAppPrePathPrefix + originalUrl.replace(".html", ".tns.html");
        }
        if (typeof view["styleUrls"] !== "undefined") {
            console.log("Yay2!");
            let originalUrls = (<Component>view).styleUrls;
            originalUrls.forEach((originalUrl, at) => (<Component>view).styleUrls[at] = environment.nativeScriptAppPrePathPrefix + originalUrl.replace(".html", ".tns.css"));
        }
        return view;
    }
}

platformNativeScriptDynamic().bootstrapModule(AppModule,{ 
  providers: [
    { provide: DirectiveResolver, useClass: myViewUrlResolver } 
  ]
});

1-instalar esta biblioteca

Npm i-D html-loader

============================================================

2 - En webpack.config use html-loader para archivos html

 { test: /\.html$/,  loaders: ['html-loader']   }

============================================================

3 - Si usa ionic , puede copiar webpack.config.js del camino "node_modules / @ionic/app-scripts/config / webpack.config.js" luego agregue el cargador html a it

=============================================================

4-Si usa ionic En paquete.json añadir estas líneas

"config": { 
    "ionic_bundler": "webpack",
    "ionic_webpack": "webpack.config.ionic.js" 
  },

=============================================================

5 - Entonces usted puede utilizarlo como abajo

@Component({
  selector: 'page-login',
 // templateUrl:"./login.html"

   template:     function(){
    if(globalVariables.test==2) {

      return require("./login2.html")
    }
    else
    {
      return require("./login.html")
    }
  }(),
})

======================================

6-Si hay un error sin resolver con la función require, puede ponerlo en declaraciones.d. ts archivo como el siguiente:

Declare var require: any;

Compile su aplicación con aot "ng serve a aot".

export let DEFAULT_PREFIX :string= './app.component';
//or localStorage.getItem('theme')
export function getMySuperTemplate(template: string) {
  return DEFAULT_PREFIX + template + '.html';
}

@Component({
  selector: 'app-root',
  templateUrl: getMySuperTemplate('2'),
  styleUrls:['./app.component.css']
})

Parece que esta forma de crear plantillas dinámicas no estará disponible para Angular 2 debido a cuestiones de seguridad. Desafortunado, viniendo de Angular 1 mi aplicación anterior fue impulsada dinámicamente de esta manera.

Para Angular 2 - Esto podría ser una forma diferente de hacer lo mismo (ejemplo de enlace a continuación). Actualizando los archivos html de la plantilla para que sean componentes en la aplicación, luego inyectándolos en (el lugar donde estaba tratando de crear la templateUrl con una cadena, etc.) componente de vista parámetro de plantilla como elementos (usando DynamicComponentLoader).

Https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-class.html

Esperanza, github ejemplo para usted le ayudará! Hay un ejemplo para compilar html dinámico. Por lo tanto, puede cargar HTML por cualquiera de su Servicio y luego compilarlo.