Angular：如何使用动态文本进行数据绑定输入

Question

我想动态更改句子中所选单词的样式（使用自定义管道），如下所示：

<p>{{ product.sentence | italicArray:product.italicsArray }}</p>

这会创建：

Hi this is a <span><i>test</i></span> sentence

如何强制执行 span 和 italics 标签而不将它们显示为明文？

Answer 1

• 我们可以循环遍历斜体数组

• 然后我们使用正则表达式

  new RegExp('\\b' + str + '\\b', 'g')

  获取所有带有匹配字符串的整个单词，然后将其包裹起来

  <i><i/>

• 我们可以使用

  DomSantizer

  来清理转换后的数据。

• 最后，由于我们现在代码中有 HTML，我们需要在

  innerHTML

  上渲染它，这将为我们提供所需的输出，但有一个问题，我们不能有角度事件/绑定，因为它在角度上下文之外渲染

Blazzze IL 的回答帮助了这个答案，为这个答案投票！

下面的工作示例

管道

import { CommonModule } from '@angular/common';
import { Pipe, PipeTransform, Sanitizer, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'italicArray',
  standalone: true,
})
export class ItalicArrayPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(value: string, strArray = []): any {
    let output: string = value;
    strArray.forEach((str: string) => {
      output = <string>this.sanitize(this.replace(output, str));
    });
    return output;
  }

  replace(value: string, str: string): string {
    var regex = new RegExp('\\b' + str + '\\b', 'g');
    str = value.replace(regex, `<i>${str}</i>`);
    return str;
  }

  sanitize(str: string) {
    console.log(this.sanitizer);
    return this.sanitizer?.sanitize(SecurityContext.HTML, str) || '';
  }
}

main.ts

import { Component, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import 'zone.js';
import { ItalicArrayPipe } from './italic-array.pipe';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ItalicArrayPipe],
  template: `
    <p [innerHTML]="product.sentence | italicArray: product.italicsArray"></p>
  `,
})
export class App {
  name = 'Angular';
  product: any = {
    sentence:
      'Hi this is a test sentence, which is a working example, and is the final solution',
    italicsArray: ['test', 'is'],
  };
}

bootstrapApplication(App);

堆栈闪电战