# 去除DOM中的组件的tag元素。
## Angular2-除了自定义标签,你还可以这样配置组件的选择器
开发应用时,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>
~~~
使用自定义标签能让文档结构更清晰,推荐使用这种方式调用组件;而对于样式复杂的组件可以尝试使用非自定义标签的选择器。
> [Remove the host HTML element selectors created by angular component](https://stackoverflow.com/questions/34280475/remove-the-host-html-element-selectors-created-by-angular-component)
[Can an angular 2 component be used with an attribute selector?](https://stackoverflow.com/questions/38471827/can-an-angular-2-component-be-used-with-an-attribute-selector)
- PWA 概念
- Immutable
- Angular 基础概念
- 入门参考
- Angular 更新总结
- Angular 生态系统
- Rx.js
- Ngrx
- CQRS/ES 模式
- Angular 5 详解
- 测试
- 定义共享模块
- 懒路由加载
- angular组件
- 双向绑定及变化检测
- 样式
- ionic 3详解
- ionic3
- ionic 插件
- Ionic 添加动画
- Ghost-Loading
- 打包发布
- Android上架国内应用市场流程
- 总结
- 文章
- 问题合集
- Cordova
- 插件开发指南
- Android插件开发指南-官网
- IOS插件开发指南-官网
- Hooks 编写
- 桥接技术
- ===cordova插件收集===
- 相关主题-官网
- 实战-自定义插件流程
- UI 及 相关资源