開發應用時,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>
使用自定義標簽能讓文檔結構更清晰,推薦使用這種方式調用組件;而對於樣式復雜的組件可以嘗試使用非自定義標簽的選擇器。
