问题

I would like to know if it's possible to render part of a string differently in an Angular string interpolation.

我想知道是否可以在Angular字符串插值中以不同的方式渲染字符串的一部分。

I have a texts.json file with the following value:

我有一个texts.json文件，其中包含以下值：

"title": "Place your {{specimen_type}} here"

"title": "在这里放置你的{{specimen_type}}"

The specimen is a variable in the component.

specimen是组件中的一个变量。

In the HTML template, I have:

在HTML模板中，我有：

{{'title' | specimen_type: specimen?.specimen_type}}

{{'title' | specimen_type: specimen?.specimen_type}}

In other words, I am substituting the placeholder specimen_type with the value of specimen in the component.

换句话说，我正在将组件中的specimen_type占位符替换为specimen的值。

The result is properly displayed without any issues.

结果正确显示，没有任何问题。

However, I wonder if I can make the value of specimen italicized in the HTML template without breaking up the title in the json file.

但是，我想知道是否可以在HTML模板中使specimen的值变为斜体，而不破坏json文件中的title。

I've tried placing italicize tags in various places, but they seem to cause the pipes to not work.

我尝试在各种位置放置斜体标签，但它们似乎会导致管道不起作用。

If all else fails and I have to split the string into three parts, which tag should I be using - I tried div tags but the contents become different lines - I suspect that I need to do some string concatenation, but that most likely will lose the styling.

如果一切都失败了，我必须将字符串拆分为三个部分，我应该使用哪个标签 - 我尝试了div标签，但内容变成了不同的行 - 我怀疑我需要进行一些字符串连接，但那很可能会丢失样式。

"title": "Place your {{specimen_type}} here"

<p> {{'title' | specimen_type: specimen?.specimen_type}} </p>

答案1

得分: 0

你有考虑在你的specimen_type管道内部执行这个操作吗？

类似这样：

@Pipe({ name: 'specimen', standalone: true })
export class SpecimenPipe implements PipeTransform {
  transform(
    value: string,
    placeholder: string,
    classes: string[] = []
  ): string {
    if (!value) {
      return '';
    }

    const spanClasses = classes.join(' ');
    const replacedValue = value.replace(
      `{{specimen_type}}`,
      `<span class="${spanClasses}">${placeholder}</span>`
    );

    return replacedValue;
  }
}

这样可以为specimen类型创建一个独立的span元素，允许你通过全局可用的类来样式化该元素。

演示：https://stackblitz.com/edit/angular-6pter3?file=src/main.ts

@Pipe({ name: 'specimen', standalone: true })
export class SpecimenPipe implements PipeTransform {
  transform(
    value: string,
    placeholder: string,
    classes: string[] = []
  ): string {
    if (!value) {
      return '';
    }

    const spanClasses = classes.join(' ');
    const replacedValue = value.replace(
      `{{specimen_type}}`,
      `<span class="${spanClasses}">${placeholder}</span>`
    );

    return replacedValue;
  }
}