Cómo usar la variable para definir templateUrl en Angular2

Quiero que el componente establezca la templateUrl con una variable, pero no funciona.

 @Component({ selector: 'article', templateUrl: '{{article.html}}', styleUrls: ['styles/stylesheets/article.component.css'] }) export class ArticleComponent implements OnInit { constructor(private route: ActivatedRoute, private articleService: ArticleService) { } articleArray = this.articleService.getArticles(); article: Article; ngOnInit(): void { this.route.params.forEach((params: Params) => { let headline = params['headline']; this.article = this.articleService.getArticle(headline) }); } } 

A donde quiera que mire, solo puedo ver soluciones para Angular 1.X, es realmente frustrante. Miré en la consola del navegador y me di cuenta de que {{article.html}} ni siquiera se estaba resolviendo. Está leyendo como es. Funciona totalmente bien cuando establezco el camino yo mismo, así que sé que el problema no está en ninguna otra parte sino aquí.

Creo que deberías usar la carga dinámica de componentes para hacer eso.

Digamos que tenemos un archivo json:

 { "title": "My first article", "html": "app/articles/first.html" } 

Podríamos crear la directiva HtmlOutlet que creará componentes dinámicamente con el templateUrl deseado:

 @Directive({ selector: 'html-outlet' }) export class HtmlOutlet { @Input() html: string; constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {} ngOnChanges() { const html = this.html; if (!html) return; @Component({ selector: 'dynamic-comp', templateUrl: html }) class DynamicHtmlComponent { }; @NgModule({ imports: [CommonModule], declarations: [DynamicHtmlComponent] }) class DynamicHtmlModule {} this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule) .then(factory => { const compFactory = factory.componentFactories .find(x => x.componentType === DynamicHtmlComponent); const cmpRef = this.vcRef.createComponent(compFactory, 0); cmpRef.instance.prop = 'test'; cmpRef.instance.outputChange.subscribe(()=>...);; }); } } 

Y luego úsalo como:

  

Donde html es la ruta al artículo html

Ver más detalles en este Plunkr