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

Question

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

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

它呈现为

5 members

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

5 members

Answer 1

这是一个管道解决方案:

strong-number.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;
  }
}

应用程序模块.ts:

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

模板:

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