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

  开发应用时,UCD给到咱们的样式常用子类选择器“>”,若是全部组件都用自定义的标签选择器,开发人员无疑要对不少样式作调整。组件化

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

  • selector: 'element-name'//自定义标签选择器
  • selector: '.class'//样式选择器
  • selector: '[attribute]'//属性选择器
  • selector: '[attribute=value]'//属性值选择器
  • selector: ':not(sub_selector)'//取反选择器
  • selector: 'selector1, selector2'//多种选择器

  这里有个示例进一步说明:code

@Component({
  selector: 'test-component, .test-component, [test-component], [component="test"]'
  template: `Hell Test Component!`
})
export class TestComponent {}

  用如下任何一种方式调用TestComponent组件,都能成功渲染。component

  • <test-component></test-component>
  • <p test-component></p>
  • <p class="test-component"></p>
  • <p component="test"></p>

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

相关文章
相关标签/搜索