Javascript 将字符串格式化为html 2

我正在尝试做如下的事情，我甚至不知道从哪里开始查找它

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

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

问题是我想根据文本属性显示它，如下所示：

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

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'
    }
  };
}

你好，世界

---

为这样的事情使用组件并不能真正解决问题——我唯一的想法就是使用jquery，我希望避免使用它。如果有帮助，可以更改文本属性格式…

一种可能的方法如下： 在组件类中：

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

在您的HTML中：

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

{{myConfig.sallion}{{myConfig.paramText}}

---

然后，您可以交换myConfig属性的值，从而为paramText生成具有指定类的文本。这就是你想要的吗？

一种可能的方法是： 在组件类中：

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

在您的HTML中：

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

{{myConfig.sallion}{{myConfig.paramText}}

---

然后，您可以交换myConfig属性的值，从而为paramText生成具有指定类的文本。这就是你想要的吗？

我可以向你推荐这样一个想法：

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

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'
    }
  };
}

从'@angular/core'导入{Component，Directive，Input，HostBinding}
@指示({
选择器：“我的模板”
})
类MyTemplate{
@输入（）数据：对象；
@主机绑定（'innerHTML'）获取html{
返回Object.keys（this.data）.reduce（（prev，cur）=>{
如果（cur=='text'）返回prev；
const regExp=new regExp（`{${cur}}}`，'g'）；
返回上一个替换（regExp，（str）=>{
返回`
${this.data[cur].text}
`; 
});
}，this.data.text）；
}
}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
`,
指令：[MyTemplate]
})
导出类应用程序{
obj={
文本：“你好{param1}{param2}请再次你好{param1}”，
参数1：{
标记：“span”，
正文：“世界”，
班级：'bla'
},
参数2：{
标签：“div”，
文字：“hello world2”，
班级：'bla'
}
};
}

---

参见此处的行动示例

我可以向您推荐如下想法：

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

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'
    }
  };
}

从'@angular/core'导入{Component，Directive，Input，HostBinding}
@指示({
选择器：“我的模板”
})
类MyTemplate{
@输入（）数据：对象；
@主机绑定（'innerHTML'）获取html{
返回Object.keys（this.data）.reduce（（prev，cur）=>{
如果（cur=='text'）返回prev；
const regExp=new regExp（`{${cur}}}`，'g'）；
返回上一个替换（regExp，（str）=>{
返回`
${this.data[cur].text}
`; 
});
}，this.data.text）；
}
}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
`,
指令：[MyTemplate]
})
导出类应用程序{
obj={
文本：“你好{param1}{param2}请再次你好{param1}”，
参数1：{
标记：“span”，
正文：“世界”，
班级：'bla'
},
参数2：{
标签：“div”，
文字：“hello world2”，
班级：'bla'
}
};
}

---

请参见此处的“动作中的示例”

您希望如何在angular2组件中使用它？我希望它更通用，这很难解释。。在WPF中，您可以为param1对象定义一个DataTemplate，通过使用一些疯狂的WPF技能，只需绑定到视图中的这个对象，就可以在ViewModel中实现这一点（有点像WPF的组件等效）。我很确定，在angular 2中这是不可能的，所以，任何不需要我使用数组和一个非常丑陋的实现的东西都会让我很感激..你想在angular2组件中如何使用它？我想它更通用一些，很难解释。。在WPF中，您可以为param1对象定义一个DataTemplate，通过使用一些疯狂的WPF技能，只需绑定到视图中的这个对象，就可以在ViewModel中实现这一点（有点像WPF的组件等效）。我很确定，在angular 2中这是不可能的，因此，任何不需要我使用数组和一个非常丑陋的实现的东西都会让我很感激..我正在寻找更通用的东西。。允许更多参数和更整洁的实现。无论如何，这似乎是一个我可以用来满足我的需要的想法，通过使用数组，无论如何，这将是丑陋的…我正在寻找一些更通用的。。允许更多参数和更整洁的实现。无论如何，这似乎是一个我可以用来满足我的需要的想法，通过使用数组，无论如何，这将是丑陋的。。。