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

【问题标题】：Styling over string interpolation in HTML - Angular在 HTML 中对字符串插值进行样式化 - Angular
【发布时间】：2019-01-23 00:05:00
【问题描述】：

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

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

它呈现像

5 个成员

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

5 个成员

【问题讨论】：

您必须创建一个自定义管道并使用 {{list.members | strongifyNumber}}

标签： html css angular

【解决方案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;
  }
}

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>

【讨论】：

【解决方案2】：

我已经根据Visionstar的回答归功于他

问题是 :first-letter 不起作用内联元素（例如 span 等），但在块/内联块元素上（例如 p、表格标题、表格单元格等）。 Bold on span first letter not working

span:first-of-type:first-letter 
{ font-weight: bold; }
p:first-of-type:first-letter 
{ font-weight: bold; }

<span style="display: block;">5 members</span>
<p>   5 members</p>

感谢aragorn的评论为了在您的数字大于数字的情况下完成答案，我认为您可以使用 js 函数来获取跨度的内容并对其进行编辑，因为我看到其他帖子有人在等待 CSS4，或者一个尚不存在的 css 单词选择器

var text=$('#myspan').text()
first = text.slice(0, text.indexOf(" "));
other=text.slice(text.indexOf(" "), text.lenght);
var newdata="<span class='number'>"+first+"</span> "+other;
$('#myspan').html(newdata);

span:first-of-type:first-letter 
{ font-weight: bold; 
  }
p:first-of-type:first-letter 
{ font-weight: bold; }

.number
{
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="display: block;">5 members</span>
<p>   5 members</p>

<span  id="myspan" style="display: block;">100 members members</span>

【讨论】：

如果你是对的，我只是尝试使用 2 位数字，然后男孩想办法把它当作一个词来处理，我认为最好有以这种方式将成员单独或分组在另一个标签中只会成为标签的样式；或使用 Jquery 访问标签的内容并替换它
不幸的是，css中没有:firstWord
是的，我知道，可能是 CSS4 选择器？在遥远的未来

【解决方案3】：

您可以将 component.ts 文件中的值分开，并将“members”一词和“number”保存在单独的变量中。

const value = "5 members".split(" ");
const membersLabel = value[1];
const membersValue = value[0];

将它们分开，您可以随意设置样式

<strong>membersValue</strong> <span>{{membersLabel}}</span>

不过，这不是防弹的。您应该以一种方式编写它，以防止出现模式“# members”的情况；

【讨论】：