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

Answer 2

一种可能的方式可能是这样的：在您的组件类中：

let myConfig = {
  salutation : "hello",
  paramText : "world",
  paramClass : "bla"
}

在你的HTML中：

<span> {{myConfig.salution}} <span class="{{myConfig.paramClass}}"> {{myConfig.paramText}} </span></span>

然后你可以交换myConfig属性的值来相应地生成带有paramText的指定类的文本。这是你在找什么？

格式化字符串为html angular 2

2 个答案: