ngSkipHydration statik bir nitelik olmalıdır

ngSkipHydration, Angular'a belirli bir bileşenin hydration'dan çıkarılması gerektiğini belirten özel bir niteliktir. Bu tanılama, ngSkipHydration niteliğinin statik olarak ayarlandığından ve değerinin "true" veya boş bir değer olarak ayarlandığından emin olur.

import {Component} from '@angular/core';

@Component({
  template: `<user-viewer ngSkipHydration="hasUser" />`,
})
class MyComponent {
  hasUser = true;
}

Bunda ne yanlış?

Angular tarafından uygulanan özel bir nitelik olarak, ngSkipHydration'ın statik olarak analiz edilebilir olması gerekir, böylece Angular derleme zamanında bir bileşen için hydration'ın gerekip gerekmediğini bilebilir.

Bunun yerine ne yapmalıyım?

ngSkipHydration kullanırken, statik bir nitelik olarak ayarlandığından emin olun (yani Angular şablon bağlama sözdizimini kullanmayın).

import {Component} from '@angular/core';

@Component({
  template: `
    <user-viewer ngSkipHydration />
    <user-viewer ngSkipHydration="true" />
  `,
})
class MyComponent {}

Koşullu bir kullanım gerekiyorsa, bileşeni bir *ngIf içine sarabilirsiniz.

import {Component} from '@angular/core';

@Component({
  template: `
    <div *ngIf="hasUser; else noUser">
      <user-viewer ngSkipHydration />
    </div>

    <ng-template #noUser>
      <user-viewer />
    </ng-template>
  `,
})
class MyComponent {}

Yapılandırma gereksinimleri

Herhangi bir genişletilmiş tanılamanın verilmesi için strictTemplates etkinleştirilmelidir. skipHydrationNotStatic, strictTemplates dışında ek bir gereksinime sahip değildir.

Bunu önleyemezsem ne olur?

Bu tanılama, projenin tsconfig.json dosyası düzenlenerek devre dışı bırakılabilir:

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "skipHydrationNotStatic": "suppress"
      }
    }
  }
}

Daha fazla bilgi için genişletilmiş tanılama yapılandırması bölümüne bakın.