Angular2-除了自定义标签,你还可以这样配置组件的选择器

11 篇文章 0 订阅
4 篇文章 0 订阅

开发应用时,UCD给到我们的样式经常使用子类选择器“>”,如果所有组件都用自定义的标签选择器,开发人员无疑要对很多样式做调整。

Angular2组件化除了自定义标签,还可以在selector元数据里配置样式、属性的调用方式。selector总共有6种配置方式:

selector: ‘element-name’//自定义标签选择器
selector: ‘.class’//样式选择器
selector: ‘[attribute]’//属性选择器
selector: ‘[attribute=value]’//属性值选择器
selector: ‘:not(sub_selector)’//取反选择器
selector: ‘selector1, selector2’//多种选择器
  这里有个示例进一步说明:

@Component({
selector: ‘test-component, .test-component, [test-component], [component=“test”]’
template: Hell Test Component!
})
export class TestComponent {}
  用以下任何一种方式调用TestComponent组件,都能成功渲染。

  使用自定义标签能让文档结构更清晰,推荐使用这种方式调用组件;而对于样式复杂的组件可以尝试使用非自定义标签的选择器。

转载自:https://www.cnblogs.com/longhx/p/6959790.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值