偽類選擇器 :not

Angular 支持 :not 偽類選擇器,

可以排除某些元素不被匹配

// 避免匹配 <textarea> 元素的 DropZone 元件
@Component({
  selector: "[dropzone]:not(textarea)",
  template: `<p>Drop files here!</p>`,
  styles: ["p { border: 2px dashed #ccc; padding: 10px; }"],
})
export class DropZoneComponent {}

使用方式

<!-- 成功匹配, 會初始化 DropZoneComponent -->
<div dropzone>Drop your files here!</div>

<!-- 不會匹配，因為使用了 textarea -->
<textarea dropzone></textarea>

[dropzone]:not(textarea) 選擇器意味著只有 dropzone 屬性存在且該元素不是 <textarea> 的時候,DropZoneComponent 才會被應用

組合選擇器 selector: 'button[type="reset"]'

這個選擇器將匹配 <button> 元素,

並且它的 type 屬性必須等於 "reset"

@Component({
  selector: 'button[type="reset"]',
  template: `<span>Reset Form</span>`,
  styles: [
    "button { background-color: red; color: white; padding: 5px 10px; }",
  ],
})
export class ResetButtonComponent {}

使用方式

<!-- 這個 button 會應用 ResetButtonComponent -->
<button type="reset"></button>

<!-- 這個 button 不會應用 ResetButtonComponent, 因為 type 不是 reset -->
<button type="submit"></button>

button[type="reset"] 的選擇器保證了只有 <button> 且 type="reset" 的元素會被應用到 ResetButtonComponent 元件

多選擇器 selector: 'drop-zone, [dropzone]'

這個選擇器允許你使用多個選擇器來匹配相同的元件

這裡可以通過自定義標籤 <drop-zone> 或屬性 [dropzone] 來使用同一個元件

@Component({
  selector: "drop-zone, [dropzone]",
  template: `<p>Drop files here!</p>`,
  styles: ["p { border: 2px dashed #ccc; padding: 10px; }"],
})
export class DropZoneComponent {}

使用方式

<!-- 使用自定義標籤 drop-zone -->
<drop-zone></drop-zone>

<!-- 使用屬性選擇器 dropzone -->
<div dropzone></div>

無論是使用 <drop-zone></drop-zone> 還是 <div dropzone></div>,

都會初始化 DropZoneComponent 元件,

這種寫法靈活,

可以根據需求選擇使用自定義標籤或屬性選擇器來引用同一個元件

總結

  • 偽類選擇器

    • 用 :not 偽類選擇器排除特定的元素

  • 組合選擇器（屬性條件）

    • 用 button[type="reset"] 來限制元件僅應用於符合特定屬性的 <button>

  • 多選擇器

    • 用 drop-zone, [dropzone] 匹配多種元素形式, 允許同一元件被應用到不同的 HTML 結構中

參考資料

看原文文檔可以學更多喔!