javascript - 用用户数据替换动态插入的关键字 Angular 5

Question

我不太确定该怎么调用它，所以我可能在寻找答案时错过了一些东西，但基本上我有来自外部 api 的数据，并将其插入到 innerHTML 中现在返回的数据中的 标记是一些 html，然后通过 innerHTML 对其进行处理，但我在返回的 html 中有某些关键字，例如 [username] 我想用我存储的数据替换它。所以在我的 .ts 文件中我可能有..

username: 'name';

然后在我的html中我有

<div class='inner-html' [innerHTML]="data.html"></div>

在我对 data.html 的回复中，html 是这样的

<h1>Hey [userName] lorem ipsum...</h1>

所以我想用存储在 username

中的用户名替换从外部 api 动态传入的 [userName]

我尝试将 {{username}} 放入传入的 html 中..但这不起作用，我也尝试过 ${username} 但这也没用..

我想知道是否还有其他方法？

编辑我尝试过使用 str.replace();在 onChanges 生命周期事件中，但这不起作用，我的代码是..

  const html = <HTMLElement>document.querySelector('.inner-html');
  html.innerHTML.replace('[userName]', this.username);

现在这样的事情一定是可能的，任何帮助将不胜感激

谢谢

Answer 1

Angular 正是为此目的提供了 Pipe:

Pipe

An Angular pipe is a function that transforms input values to output values for display in a view.

它们提供可重用和可扩展的方法来实现您的目标。请检查一下，因为我认为这就是您所追求的:

Live Solution

基本上，您可以通过转换来传输 [innerHTML] 的输出:

<div class='inner-html' [innerHTML]="data.html | parseInnerHtml:replacements"></div>

parseInnerHtml 是自定义管道，它需要替换键和相应值的哈希值来替换:

import { Input, Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'parseInnerHtml'})
export class ParseInnerHtml implements PipeTransform {
  transform(text: string, replacements: Object): string {
    let search = Object.keys(replacements);
    for(let i = 0; i < search.length; i++){
      text = text.replace('['+ search[i] +']', replacements[search[i]]);
    }
    return text;
  }
}