afterRenderEffect — Angular

API

function afterRenderEffect(
  callback: (onCleanup: EffectCleanupRegisterFn) => void,
  options?: AfterRenderOptions | undefined,
): AfterRenderRef;
function afterRenderEffect<E = never, W = never, M = never>(
  spec: {
    earlyRead?: ((onCleanup: EffectCleanupRegisterFn) => E) | undefined;
    write?:
      | ((
          ...args: [
            ...([E] extends [never] ? [] : [Signal<E>]),
            EffectCleanupRegisterFn,
          ]
        ) => W)
      | undefined;
    mixedReadWrite?:
      | ((
          ...args: [
            ...([W] extends [never]
              ? [E] extends [never]
                ? []
                : [Signal<E>]
              : [Signal<W>]),
            EffectCleanupRegisterFn,
          ]
        ) => M)
      | undefined;
    read?:
      | ((
          ...args: [
            ...([M] extends [never]
              ? [W] extends [never]
                ? [E] extends [never]
                  ? []
                  : [Signal<E>]
                : [Signal<W>]
              : [Signal<M>]),
            EffectCleanupRegisterFn,
          ]
        ) => void)
      | undefined;
  },
  options?: AfterRenderOptions | undefined,
): AfterRenderRef;

function afterRenderEffect(callback: (onCleanup: EffectCleanupRegisterFn) => void, options?: AfterRenderOptions | undefined): AfterRenderRef;

Зарегистрируйте эффект, который при срабатывании вызывается после завершения отрисовки приложения, на этапе mixedReadWrite.

Вместо этого рекомендуется явно указать этап для эффекта, иначе возможно значительное снижение производительности.

Обратите внимание, что обратные вызовы afterRenderEffect, основанные на обратных вызовах, выполняются

в порядке регистрации
только при наличии изменений
только в браузерных средах
на этапе mixedReadWrite

Не гарантируется, что компоненты будут гидратированы до выполнения обратного вызова. Будьте осторожны при непосредственном чтении или изменении DOM и макета.

@paramcallback(onCleanup: EffectCleanupRegisterFn) => void

Функция обратного вызова эффекта для регистрации

@paramoptionsAfterRenderOptions | undefined

Параметры для управления поведением обратного вызова

@returnsAfterRenderRef

function afterRenderEffect<E = never, W = never, M = never>(spec: { earlyRead?: ((onCleanup: EffectCleanupRegisterFn) => E) | undefined; write?: ((...args: [...[E] extends [never] ? [] : [Signal<E>], EffectCleanupRegisterFn]) => W) | undefined; mixedReadWrite?: ((...args: [...[W] extends [never] ? [E] extends [never] ? [] : [Signal<E>] : [Signal<W>], EffectCleanupRegisterFn]) => M) | undefined; read?: ((...args: [...[M] extends [never] ? [W] extends [never] ? [E] extends [never] ? [] : [Signal<E>] : [Signal<W>] : [Signal<M>], EffectCleanupRegisterFn]) => void) | undefined; }, options?: AfterRenderOptions | undefined): AfterRenderRef;

Зарегистрируйте эффекты, которые при срабатывании вызываются после завершения отрисовки приложения на указанных этапах. Доступны следующие этапы:

earlyRead Используйте этот этап, чтобы читать данные из DOM до последующего обратного вызова write, например, для выполнения пользовательской компоновки, которую браузер не поддерживает изначально. Если чтение может подождать до завершения этапа записи, предпочтительнее использовать этап read. На этом этапе никогда не изменяйте DOM.
write Используйте этот этап, чтобы изменять DOM. На этом этапе никогда не читайте данные из DOM.
mixedReadWrite Используйте этот этап для одновременного чтения данных из DOM и изменения DOM. Никогда не используйте этот этап, если работу можно распределить между другими этапами.
read Используйте этот этап, чтобы читать данные из DOM. На этом этапе никогда не изменяйте DOM.

По возможности предпочтительнее использовать этапы read и write, а не этапы earlyRead и mixedReadWrite, чтобы избежать снижения производительности.

Обратите внимание:

Эффекты выполняются в следующем порядке этапов и только при наличии изменений в зависимостях-сигналах:
1. earlyRead
2. write
3. mixedReadWrite
4. read
afterRenderEffect в рамках одного этапа выполняются в порядке регистрации.
afterRenderEffect выполняются только в браузерных средах, но не на сервере.
afterRenderEffect выполняются как минимум один раз.

Первый обратный вызов этапа, выполняемый в рамках этой спецификации, не получает параметров. Каждый последующий обратный вызов этапа в этой спецификации получает возвращаемое значение предыдущего обратного вызова этапа в виде Signal. Это позволяет координировать работу на нескольких этапах.

Angular не может проверять или обеспечивать корректное использование этапов и полагается на то, что каждый разработчик будет следовать рекомендациям, описанным для каждого значения, тщательно выбирать подходящее значение и при необходимости рефакторить код. Это позволяет Angular эффективнее минимизировать снижение производительности, связанное с ручным доступом к DOM, и обеспечивать наилучший опыт для конечных пользователей вашего приложения или библиотеки.

@paramspec

{ earlyRead?: ((onCleanup: EffectCleanupRegisterFn) => E) | undefined; write?: ((...args: [...[E] extends [never] ? [] : [Signal<E>], EffectCleanupRegisterFn]) => W) | undefined; mixedReadWrite?: ((...args: [...[W] extends [never] ? [E] extends [never] ? [] : [Signal<E>] : [Signal<W>], EffectCleanupRegisterFn]) => M) | undefined; read?: ((...args: [...[M] extends [never] ? [W] extends [never] ? [E] extends [never] ? [] : [Signal<E>] : [Signal<W>] : [Signal<M>], EffectCleanupRegisterFn]) => void) | undefined; }

Функции эффектов для регистрации

@paramoptionsAfterRenderOptions | undefined

Параметры для управления поведением эффектов

@returnsAfterRenderRef

Примечания по использованию

Используйте afterRenderEffect для создания эффектов, которые читают данные из DOM или изменяют DOM и поэтому должны выполняться после отрисовки.