跳過水合旗標套用到無效的節點

當 ngSkipHydration 屬性被加到不適當的 DOM 節點時，就會發生此錯誤。ngSkipHydration 屬性只能套用到元件宿主節點，可直接在範本中套用，或透過宿主繫結套用。它不能套用到其他 DOM 節點，套用了也不會有效果，只會造成此錯誤。

更多關於水合的資訊，請見本指南。

以下範例會觸發此錯誤。

範例 1

在此範例中，ngSkipHydration 屬性透過指令的宿主繫結套用到 <div>。由於 <div> 並非元件宿主節點，Angular 會拋出錯誤。

@Directive({
  selector: '[dir]',
  host: {ngSkipHydration: 'true'},
})
class Dir {}

@Component({
  selector: 'app',
  imports: [Dir],
  template: ` <div dir></div> `,
})
class Simple {}

範例 2

在此範例中，ngSkipHydration 透過範本以屬性形式套用到 <div>。 由於 <div> 並非元件宿主節點，Angular 會拋出錯誤。

@Component({
  selector: 'app',
  template: ` <div ngSkipHydration></div> `,
})
class Simple {}

除錯方式

從所有無效的 DOM 節點上移除 ngSkipHydration 屬性。或者，把 ngSkipHydration 屬性移到元件宿主節點，可在範本中移動，或透過宿主繫結移動。