时间戳

首页 > 解决方案 > 在 HTML 中对字符串插值进行样式化 - Angular

html - 在 HTML 中对字符串插值进行样式化 - Angular

问题描述

假设模板以一种绑定、插值的方式从组件接收字符串：

<span>{{list.members}}</span>

它呈现像

5名成员

如何在不更改组件上的任何内容的情况下编辑 HTML 上的字符串，以便获得粗体数字 5 和“成员”保持不变：

5名成员

标签： htmlcssangular

解决方案

这是一个管道解决方案：

强数字.pipe.ts：

@Pipe({name: 'strongifyNumber'})

export class StrongifyNumber implements PipeTransform {
  transform(value: string): string {
    let values: string[] = value.split(' ')
    if(values.length == 2){
        return ' <b>'+values[0]+'</b> ' + values[1];
    }
    return value;
  }
}

app.module.ts：

import { StrongifyNumber } from './strong-number.pipe';
@NgModule({
  declarations: [
    AppComponent, StrongifyNumber
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [StrongifyNumber],
  bootstrap: [AppComponent]
})

模板：

<span [innerHTML]="list.members | strongifyNumber"></span>

推荐阅读