多模板urls 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);
  }
}