# 去除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 及 相關資源