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

标签：元数据   attr   反选   应用   template   结构   stc   component   tor   

　　开发应用时，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组件，都能成功渲染。

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

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

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

标签：元数据   attr   反选   应用   template   结构   stc   component   tor   

原文地址：http://www.cnblogs.com/longhx/p/6959790.html