当前位置: 首页 > 知识库问答 >
问题:

如何在angular中绑定/呈现{{…}}html代码与innerHtml

董意蕴
2023-03-14

我正在尝试用innerHTML绑定/呈现html内容,但无法呈现{{...}}成角的。

代码如下:

<div [innerHtml]="TestString"></div>

test = " HTML Content ";
TestString = "<div>This is test code, i am trying to bind/render {{ test }} code with angular..,</div>";

共有1个答案

苏野
2023-03-14

试试看:

test = " HTML Content ";
TestString = `<div>This is test code, i am trying to bind/render ${this.test} code with angular..,</div>`

https://stackblitz.com/edit/Angular-ckxsp8?file=src/app/app.component.ts

如果您想从组件中的字符串计算模板,您可以创建自己的指令来执行此操作:

import {
  Compiler, NgModule, Component, Input, ComponentRef, Directive, 
  ModuleWithComponentFactories, OnChanges, Type,
  ViewContainerRef
} from '@angular/core';
import { CommonModule } from '@angular/common';

@Directive({
  selector: '[compile]'
})
export class CompileDirective implements OnChanges {
  @Input() compile: string;
  @Input() compileContext: any;

  compRef: ComponentRef<any>;

  constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {}

  ngOnChanges() {
    if(!this.compile) {
      if(this.compRef) {
        this.updateProperties();
        return;
      }
      throw Error('You forgot to provide template');
    }

    this.vcRef.clear();
    this.compRef = null;

    const component = this.createDynamicComponent(this.compile);
    const module = this.createDynamicModule(component);
    this.compiler.compileModuleAndAllComponentsAsync(module)
      .then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
        let compFactory = moduleWithFactories.componentFactories.find(x => x.componentType === component);

        this.compRef = this.vcRef.createComponent(compFactory);
        this.updateProperties();
      })
      .catch(error => {
        console.log(error);
      });
  }

  updateProperties() {
    for(var prop in this.compileContext) {
      this.compRef.instance[prop] = this.compileContext[prop];
    }
  }

  private createDynamicComponent (template:string) {
    @Component({
      selector: 'custom-dynamic-component',
      template: template,
    })
    class CustomDynamicComponent {}
    return CustomDynamicComponent;
  }

  private createDynamicModule (component: Type<any>) {
    @NgModule({
      // You might need other modules, providers, etc...
      // Note that whatever components you want to be able
      // to render dynamically must be known to this module
      imports: [CommonModule],
      declarations: [component]
    })
    class DynamicModule {}
    return DynamicModule;
  }
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {

  name = 'Product Name :'
  price = '3'
  template: string = `{{ name }} <b>{{ price }}$</b>`;
}
<div class="product">
  <ng-container *compile="template; context: this"></ng-container>
</div>

演示:https://stackblitz.com/edit/Angular-eipbup?file=src%2fapp%2fapp.component.html

 类似资料:
  • 我试图用innerHTML绑定/呈现html内容,但无法呈现{{…}在角度上。 代码如下: 结果 这是测试代码,我正在尝试用angular..绑定/呈现{test}代码。。, 未绑定/呈现测试变量值。。。。

  • 我已经成功地使用angular而不是“Open/Save”对话框在HTML中显示PDF文件。现在,我被困在试图显示Word文档中。我曾经显示一个Word文档,并成功地完成了显示,但我想限制文件在“新建”选项卡中打开,以便他无法下载

  • 在angular 1中,绑定的工作方式类似于ng-bind-html=“htmlvalue”

  • GitCafe GitCafe 是一个由国人建立的类似于 GitHub 的第三方代码托管平台。 绑定 GitCafe 账号与 DaoCloud 账号 若需要将托管在 GitCafe 上的代码库做为 Docker 镜像的构建源,就需要先将 DaoCloud 账号与您的 GitCafe 账号进行绑定。 第一步 在任意页面的右上角点击「账号信息」,并在新的页面中进入「第三方账号」标签页。 第二步 点击

  • Coding Coding 是国内新兴的第三方代码开发、托管和项目管理平台,拥有良好的用户体验和完备的功能。 绑定 Coding 账号与 DaoCloud 账号 如需将托管在 Coding 上的项目代码拉取至 DaoCloud 并作为 Docker 镜像的构建基础,则需要先将您的 Coding 账号与 DaoCloud 账号绑定起来。 第一步 在任意页面的右上角点击「账号信息」,并在新的页面中进入

  • 什么是 Bitbucket Bitbucket 与 GitHub 在代码管理上的功能相似,是 GitHub 以外的又一大第三方代码托管平台之一。 绑定 Bitbucket 账号与 DaoCloud 账号 如果要将托管在 GitHub 上的代码库做为 Docker 镜像的构建源,就需要先将 DaoCloud 账号与您的 Bitbucket 进行绑定。 第一步 在任意页面的右上角点击「账号信息」,并在