多个模板网址Angular 6

Question

我正在Angular 6中构建一个前端,我将需要一些组件,这些组件需要根据登录的人拥有不同的html结构.

这可以从2到20多个不同的模板变化,所以我真的希望能够将它们放在不同的文件中,并将templateUrl指向正确的文件,而不是使用*ngIf来决定模板的哪个部分应该呈现.

有没有办法做到这一点？

Answer 1

您可以在模板中使用innerHtml属性，并且可以动态地赋予模板

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
            <div [innerHtml]="myTemplate">
            </div>
          `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private myTemplate: any = '';
  constructor(http: HttpClient) {

 // write condition here

    http.get('/template-path', {responseType: 'text'}).subscribe(data => this.myTemplate = data);
  }
}