javascript - 将字符串格式化为 html Angular 2

Question

我正在尝试执行以下操作，但我什至不知道从哪里开始查找。

我正在尝试创建一些像这样的对象

{ 
 text: "hello {param1}", 
 param1: {
              text:"world", 
              class: "bla"
         }
}

问题是我想根据这样的文本属性显示它:

<span> hello <span class="bla"> world </span></span>

使用组件来解决这样的问题并不能真正解决问题 - 我唯一的想法是使用 jquery，我想避免它。如果有帮助的话，可以更改文本属性格式...

Answer 1

我可以向您建议这样的想法:

import { Component, Directive, Input, HostBinding } from '@angular/core'

@Directive({
  selector: 'my-template'
})
class MyTemplate {
  @Input() data: Object;
  @HostBinding('innerHTML') get html {
    return Object.keys(this.data).reduce((prev, cur) => {
      if(cur === 'text') return prev;
      const regExp = new RegExp(`{${cur}}`, 'g');
      return prev.replace(regExp, (str) =>{
        return `<${this.data[cur].tag} class="${this.data[cur].class}">
                  ${this.data[cur].text}
                </${this.data[cur].tag}>`; 
      });
    }, this.data.text);
  }
}


@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <my-template [data]="obj"></my-template>
    </div>
  `,
  directives: [MyTemplate] 
})
export class App {
  obj = { 
    text: "hello {param1} {param2} please again hello {param1}", 
    param1: {
      tag: 'span',
      text: 'world', 
      class: 'bla'
    },
    param2: {
      tag: 'div',
      text: 'hello world2', 
      class: 'bla'
    }
  };
}

在此处查看实际示例 http://plnkr.co/edit/G5m7zAxzhybhN5QdnVik?p=preview