如何使用angular4在组件标签中设置粗体和斜体属性

Posted

技术标签:

【中文标题】如何使用angular4在组件标签中设置粗体和斜体属性【英文标题】:how to set bold and italic property in component label using angular4 【发布时间】:2018-08-08 00:01:21 【问题描述】:

我在该组件内部有一个模板和选择器 这是我的组件

@Component(
    selector: 'labelnumeric',
    template: '<label>hello</label>'
)

export class LabelNumeric



我想动态地为标签加粗和斜体添加一个属性,我该怎么做呢?

【问题讨论】:

你的意思是动态设置标签为bolditalic?对于静态你可以做&lt;label&gt;&lt;b&gt;&lt;i&gt;hello&lt;/i&gt;&lt;/b&gt;&lt;/label&gt; 【参考方案1】:

您可以为此使用ngClass

@Component(
    selector: 'labelnumeric',
    template: ' <label [ngClass]="'font-italic': someCondition, 'font-bold' : someOtherCondition">hello</label>'
)

export class LabelNumeric



在某些条件下分配这两个类,然后使用 css 可以设置 font-style 和 font-weight。

.font-italic 
  font-style: italic;


.font-bold 
  font-weight: bold
  

【讨论】:

【参考方案2】:

像这样试试。您必须在 css 中定义 .class-bold。无论是在装饰器中还是在外部。

@Component(
    selector: 'labelnumeric',
    template: '<label #mylabel>hello</label>'
)

export class LabelNumeric implements OnInit 

  @ViewChild('mylabel') label;

  @Input() isBold: boolean = false;

  ngOnInit() 
    if(this.isBold)
      this.label.nativeElement.classList.add('class-bold');
    
  

并像这样使用它:&lt;labelnumeric [isBold]="true"&gt;&lt;/labelnumeric&gt;

如果可行,您可以相应地为斜体定义 @Input。

【讨论】:

并假设我想通过 html 控件更改标签文本,那么我该怎么做呢? 我会在课堂上使用@Input() labelText = 'default text';,在模板中使用labelText。所以你可以传入一个字符串&lt;labelnumeric labelText="hello"&gt;&lt;/labelnumeric&gt; 你能把它弄成小提琴吗

以上是关于如何使用angular4在组件标签中设置粗体和斜体属性的主要内容,如果未能解决你的问题,请参考以下文章

iPhone/iPad的UILabel如何设置粗体和斜体?

如何将粗体和斜体应用于NSMutableAttributedString范围?

如何将 HTML5 画布文本设置为粗体和/或斜体?

有没有办法在单个单元格中使用下划线、粗体和斜体?

Java FX:粗体和斜体样式未应用于某些字体系列

R语言ggplot2可视化:通过在element_text函数中设置ifelse判断条件自定义标签文本的显示格式:例如粗体斜体等