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