如何使用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
我想动态地为标签加粗和斜体添加一个属性,我该怎么做呢?
【问题讨论】:
你的意思是动态设置标签为bold
和italic
?对于静态你可以做<label><b><i>hello</i></b></label>
【参考方案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>
。
你能把它弄成小提琴吗以上是关于如何使用angular4在组件标签中设置粗体和斜体属性的主要内容,如果未能解决你的问题,请参考以下文章
如何将粗体和斜体应用于NSMutableAttributedString范围?
R语言ggplot2可视化:通过在element_text函数中设置ifelse判断条件自定义标签文本的显示格式:例如粗体斜体等