Question

我不确定该怎么称呼所以我可能在寻找答案时错过了一些事情，但基本上我有来自外部api的数据并且它被插入到{{ 1}}标签现在正在返回的数据是一些html，然后由innerHTML处理，但我在返回的html中有某些关键字，如innerHTML，我想用数据替换它我已经存储了。所以在我的 .ts 文件中，我可能有..

[username]

然后在我的HTML中我有

username: 'name';

在<div class='inner-html' [innerHTML]="data.html"></div>的回复中，html就像这样

data.html

所以我想用<h1>Hey [userName] lorem ipsum...</h1>

中存储的用户名替换外部api动态提供的[userName]

我尝试将username放入正在进入的html中..但是这没有用，我也尝试了{{username}}但是这也没有用。

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

修改我试过使用str.replace（）;在onChanges生命周期事件中，但是我的代码不是......

${username}

现在必须有这样的事情，任何帮助都会受到赞赏

由于

Answer 1

Angular为此精确地提供了管道：

管

Angular管道是将输入值转换为输出的函数   在视图中显示的值。

他们提供可重复使用的和可扩展方法来实现您的目标。请检查一下，因为我认为这就是你的目标：

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

Answer 2

看起来您可以控制动态数据。如果是这样的话，如果您可以将服务器上的html转换为包含username，那将更有意义。

但是，如果您无法控制，则可以轻松使用[username]替换您拥有的内容。 E.G：

str.replace('[username]', this.username);

Answer 3

-- in hello.component.ts
@Component({
  selector: 'hello',
  template: ``,
})
export class HelloComponent  {
  @Input() username: string;

  private _html: string;
  @HostBinding('innerHTML')
  @Input() set html(html: string) {
    this._html = html.replace('[userName]', this.username);
  }

  get html() {
     return this._html;
  }
}

-- in app.component.html
<hello [html]="html" [username]="username"></hello>

-- in app.component.ts
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  username = 'App user';
  html = '<h1>Hello [userName]!</h1>';
}

Live example

用用户数据angular 5替换动态插入的关键字

3 个答案: