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

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

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

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

export class LabelNumeric
{

}

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

【问题讨论】：

你的意思是动态设置标签为bold和italic？对于静态你可以做<label><b><i>hello</i></b></label>

标签： jquery css angularjs angularjs-directive angular-components

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

并像这样使用它：<labelnumeric [isBold]="true"></labelnumeric>

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

【讨论】：

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