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

Question

我在那个组件里面有一个模板和选择器这是我的组件

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

export class LabelNumeric
{

}

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

Answer 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
  }

Answer 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。

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

how to set bold and italic property in component label using angular4

css

jquery

angularjs

angularjs-directive

angular-components