Angular 来自HTTP调用的角度动态模板

我有一个简单的问题：在一个简单的角度组件中，我们是否可以动态更改http调用检索到的模板，例如：

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


/**
 * Les liens link permettent de passer d'une page à l'autre.
 */
@Component({
  selector: 'mycomponent',
  template: '<strong>Loading…</strong>'
})
export class MyComponent implements OnInit {

  //#region PROPRIÉTÉS
    private moHttp : HttpClient
  //#endregion

  //#region CONSTRUCTEUR
  constructor(poHttp: HttpClient){
    this.moHttp = poHttp;
  }

  public ngOnInit(): void {
    this.moHttp.get('https://myapiUrl').subscribe(poData:any => {

      // here poData is HTML string, and I want to set it instead of the "<strong>Loading…</strong>"

    });
  }

  }
  //#endregion

从'@angular/core'导入{Component，OnInit}；
从'@angular/common/http'导入{HttpClient}；
/**
*他们把通行证和通行证连在一起。
*/
@组成部分({
选择器：“mycomponent”，
模板：'正在加载…'
})
导出类MyComponent实现OnInit{
//#本地区
私有moHttp:HttpClient
//#端区
//#区域建设者
构造函数（poHttp:HttpClient）{
this.moHttp=poHttp；
}
public ngOnInit（）：void{
这个.moHttp.get（'https://myapiUrl）。订阅（poData:any=>{
//这里poData是HTML字符串，我想设置它而不是“加载…””
});
}
}
//#端区

---

提前谢谢

假设您的

poData

是一个字符串，您可以执行以下操作：

@Component({
  selector: 'mycomponent',
  template: '<div [innerHTML]="myContent"></div>'
})
export class MyComponent implements OnInit {
   private moHttp : HttpClient;
   myContent: any= '<strong>Loading…</strong>';

   constructor(poHttp: HttpClient, private sanitizer: DomSanitizer){
      this.moHttp = poHttp;
   }

   public ngOnInit(): void {
      this.moHttp.get('https://myapiUrl').subscribe(poData:any => {

      this.myContent = this.sanitizer..bypassSecurityTrustHtml(poData);

   });
 }
}

@组件({
选择器：“mycomponent”，
模板：“”
})
导出类MyComponent实现OnInit{
私有moHttp:HttpClient；
myContent:any='正在加载…；
构造函数（poHttp:HttpClient，私有sanitizer:DomSanitizer）{
this.moHttp=poHttp；
}
public ngOnInit（）：void{
这个.moHttp.get（'https://myapiUrl）。订阅（poData:any=>{
this.myContent=this.sanitizer..bypassSecurityTrustHtml（poData）；
});
}
}

尝试使用

注意：不必创建新字段来保留注入的服务。

---

构造函数（私有http:HttpClient）{}

将允许您在类中的任何位置使用HttpClient（如

this.http

）。

Angular本机不支持动态模板。您可以使用延迟加载，也可以直接通过DOM更新视图。

。。。或者，多亏了DenisVuyka，有一种非常黑客的方法来实现这一点：

在这里，我们需要创建NgModule来创建组件工厂，并使用组件装饰器将元数据（如模板和提供者）传递给组件类

@Component({
    selector: 'runtime-content',
    template: `<div #container></div>`
})    
export class RuntimeContentComponent {
    constructor(public componentRef: ComponentRef, private compiler: Compiler){}

    @ViewChild('container', { read: ViewContainerRef })
    container: ViewContainerRef;

    public compileTemplate(template) {
        let metadata = {
           selector: `runtime-component-sample`,
           template: template
        };

        let factory = this.createComponentFactorySync(this.compiler, metadata, null);

        if (this.componentRef) {
            this.componentRef.destroy();
            this.componentRef = null;
        }
        this.componentRef = this.container.createComponent(factory);
    }

    private createComponentFactorySync(compiler: Compiler, metadata: Component, componentClass: any): ComponentFactory<any> {
        const cmpClass = componentClass || class RuntimeComponent { name: string = 'Denys' };
        const decoratedCmp = Component(metadata)(cmpClass);

        @NgModule({ imports: [CommonModule], declarations: [decoratedCmp] })
        class RuntimeComponentModule { }

        let module: ModuleWithComponentFactories<any> = compiler.compileModuleAndAllComponentsSync(RuntimeComponentModule);
        return module.componentFactories.find(f => f.componentType === decoratedCmp);
    }
}

@组件({
选择器：“运行时内容”，
模板：``
})    
导出类RuntimeContentComponent{
构造函数（公共componentRef:componentRef，私有编译器：compiler）{}
@ViewChild（'container'，{read:ViewContainerRef}）
容器：ViewContainerRef；
公共编译器模板（模板）{
让元数据={
选择器：`runtime component sample`，
模板：模板
};
让工厂=this.createComponentFactorySync（this.compiler，元数据，null）；
if（this.componentRef）{
this.componentRef.destroy（）；
this.componentRef=null；
}
this.componentRef=this.container.createComponent（工厂）；
}
私有createComponentFactorySync（编译器：编译器，元数据：组件，组件类：任意）：组件工厂{
const cmpClass=componentClass | | class RuntimeComponent{name:string='Denys'}；
const decoratedCmp=组件（元数据）（cmpClass）；
@NgModule（{imports:[CommonModule]，声明：[decoratedCmp]}）
类RuntimeComponentModule{}
let模块：moduleWithComponentFactorys=compiler.compileModuleAndAllComponentsSync（RuntimeComponentModule）；
返回module.componentFactorys.find（f=>f.componentType===decoratedCmp）；
}
}

是的，我已将答案更新为使用

DOMSantizer

Tanks以获取您的答案：）。但是innerhtml是用于静态html的吗？如果poData=“”？可能与