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

相關文章
相關標籤/搜索