完全な文のうち選択された単語にhtmlタグを追加する角度2

Question

JSONオブジェクトで文章を受け取るコンポーネントがあります。各文には、さまざまな色に関連付けられた単語の配列が含まれています。その上

[{ 
    "message": "Attention! The user already exists.", 
    "words": [ 
    {"word": "user", "color": "#ffddcc"}, 
    {"word": "Attention!", "color": "#ff99cc"}, 
    {"word": "exists", "color": "#cddcef"} 
    ] 
}, 
{"message": "Hey! There are no users", 
    "words": [{"word": "users","color": "#ffddcc"},{"word": "Hey!","color": "#ff99cc"},{"word": "are","color": "#cddcef"}]}, 
{"message": "This is a are recipe","words": [{"word": "are","color": "#ffddcc"},{"word": "recipe","color": "#cddcef"}]} 
] 

そして：

後は、次のように私が取得しています

export class ExampleComponent implements OnInit, OnDestroy { 

     ngOnInit() {this._getChats(userId);} 

     private _getData(userId: string) { 
     this.dataSub = this.api 
     .getDataList$() 
     .subscribe(
      res => { 
      this.data = res.result.data; 
      }, 
      error => { 
      console.log(error); 
     }); 
     } 
    } 

データがあるコンポーネントの抜粋です。

<div *ngFor="let dt of data">{{dt.message | formatData:dt.words}}</div> 

を次のように は、今私は現在、私のhtmlでこれらの文章を示すのです私の問題は、私は

<div><span style="color:#ff99cc">Attention!</span> The <span style="color:#ffddcc">user</span> already <span style="color:#cddcef">exists</span>. 

以下のようにそれぞれのカラーコードのspanタグを配列に言及したすべての単語を置き換えたいということです

文字列を識別して置き換えるカスタムパイプを作成しようとしました。しかし、私はここで立ち往生しています。

以下は私が書いたカスタムパイプです。

export class FormatDataPipe implements PipeTransform { 
    transform(value: string, args: any) { 
     if(args.length === 0) { 
     return value; 
     } 
     for(let i =0; i < args.length; i++) { 
     if(value.includes(args[i].word)) { 
      const subVal = `<span style='color:'"` + args[i].color + `"'>` + args[i].token + `</span>`; 
      value.replace(args[i].token, subVal); 
     } 
     } 
    } 
    } 

ありがとうございました。

Answer 1

あなたのパイプが、それはどこにHTMLを挿入することができるようDomSanitizerを使用する必要がある

あなたの弦は以前はありました。次に、パイプは、文字列内の単語のすべてのインスタンスをhtml spanタグで囲まれた単語に置き換えることができます。

あなたの新しいパイプ：パイプの

import { DomSanitizer } from '@angular/platform-browser'; 

... 

@Pipe({ 
    name: 'formatData' 
}) 
export class FormatDataPipe implements PipeTransform { 
    constructor(private domSanitizer: DomSanitizer) {} 

    transform(message: string, words: any) { 
    let htmlString = words.reduce(
     (memo, word) => memo.replace(
      word.word, 
      `<span style="color:${word.color};">${word.word}</span>` 
     ), 
     message); 

    return this.domSanitizer.bypassSecurityTrustHtml(htmlString); 
} 
} 

のHTML実装：

<div *ngFor="let dt of data" [innerHtml]="dt.message | formatData: dt.words"></div> 

Answer 2

私は文を単語配列に変換して、内部ループを実行してそれらをレンダリングします。あなたのコンポーネントで

<div *ngFor="let dt of data"> 
    <span *ngFor="let wd of words(dt.message)" style="color:#ffddcc">{{wd.text}}</span> 
</div> 

配列/オブジェクトや単語をsentenseを取ると変換して返します方法があるでしょう

words(snts: string) { 
return snts.split(''); 
}