Come utilizzare la variabile per definire templateUrl in Angular2

Voglio che il componente imposti templateUrl con una variabile, ma non funziona.

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

Ogni dove guardo, posso vedere solo le soluzioni per Angular 1.X, è davvero frustrante. Ho esaminato la console del browser e ho capito che {{article.html}} non si risolve nemmeno. Sta leggendo così com’è. Funziona perfettamente quando imposto il percorso da solo, quindi so che il problema non è da nessuna parte, ma qui.

Penso che dovresti usare il caricamento dinamico dei componenti per farlo.

Diciamo che abbiamo un file JSON:

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

Potremmo creare una direttiva HtmlOutlet che creerà il componente dynamicmente con templateUrl desiderato:

 @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(()=>...);; }); } } 

E poi usarlo come:

  

Dove html è il percorso per l’articolo html

Vedi maggiori dettagli in questo Plunkr