Ionic 我期待呈现到我的Angular 应用程序存储在数据库中的模板，这些模板确实有字符串插值

bvn4nwqk 于 2023-10-14 发布在 Ionic

关注(0)|答案(2)|浏览(139)

我期待呈现到我的Angular 应用程序存储在数据库中的模板，这些模板确实有字符串插值，我需要有这些值时，渲染填充
component.html

<div [innerHTML]="getTemplateData(testHtml)"></div>

component.ts

public testHtml: string = 
  `<h1>{{title}}</h1>
   <h2>My favorite hero is: {{myHero}}</h2>`;
  
  getTemplateData(html: string) {
    return  this.sanitizer.bypassSecurityTrustHtml(html);    
  }

我这里的主要问题是我得到了要呈现的html字符串，但字符串插值变量并没有填充，只是停留在{{title}}和{{hero}}，但html元素呈现得很好

ionic-framework

来源：https://stackoverflow.com/questions/77201419/i-am-looking-to-render-templates-stored-in-a-database-into-my-angular-applicatio

2条答案

按热度按时间

83qze16e1#

正如Nate-kumar所说，如果你只需要插值，你可以创建一个管道

@Pipe({ name: 'resolve', standalone: true })
export class ResolveValues implements PipeTransform {
  constructor(private satinizer: DomSanitizer) {}
  transform(testHtml: string, parent: any, changed: boolean) {
    const data = testHtml.match(/{{.+}}/g);
    let result = testHtml;
    if (data != null) {
      data.forEach((x) => {
        const variable = x.match(/{{(.+)}}/);
        result = result.replace(x, variable ? parent[variable[1]] : '');
      });
    }
    return this.satinizer.bypassSecurityTrustHtml(result);
  }
}

如果你有两个变量

changed: boolean = false; //really is a value that will be true/false/true/false
  testHtml: string = `<h1>{{title}}</h1>
   <h2>My favorite hero is: {{myHero}}</h2>`;

您可以使用

<div [innerHTML]="testHtml|resolve:this:changed"></div>

看到变量“改变”，这是必要的，如果你是计划改变的值，你插，例如。

change()
{
    this.myHero='Angular the best' //change the variable
    this.changed=!this.changed  //change to force angular repaint
}

A stackblitz

赞(0）回复(0）举报 2023-10-14

rqdpfwrv2#

你可以通过使用模板文字来做到这一点：

`<h1>${title}</h1>`

赞(0）回复(0）举报 2023-10-14

我来回答

Ionic 我期待呈现到我的Angular 应用程序存储在数据库中的模板，这些模板确实有字符串插值

2条答案

相关问题

热门标签

最新问答