afterEveryRender — Angular

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

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

API

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

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

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

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

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

После каждого рендеринга обратные вызовы выполняются в следующем порядке этапов:
1. earlyRead
2. write
3. mixedReadWrite
4. read
Обратные вызовы на одном этапе выполняются в порядке их регистрации.
Обратные вызовы выполняются только в браузере и не выполняются на сервере.

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

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

Компоненты не обязательно будут гидратированы до выполнения обратного вызова. Соблюдайте осторожность при прямом чтении или записи данных DOM и компоновки.

@paramspec

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

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

@paramoptionsAfterRenderOptions | undefined

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

@returnsAfterRenderRef

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

Используйте afterEveryRender, чтобы читать или записывать данные DOM после каждого рендеринга.

Пример

@Component({
  selector: 'my-cmp',
  template: `<span #content>{{ ... }}</span>`,
})
export class MyComponent {
  contentRef = viewChild.required<ElementRef>('content');

  constructor() {
    afterEveryRender({
      read: () => {
        console.log('content height: ' + this.contentRef().nativeElement.scrollHeight);
      }
    });
  }
}

function afterEveryRender(callback: VoidFunction, options?: AfterRenderOptions | undefined): AfterRenderRef;

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

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

Обратите внимание, что обратный вызов будет выполняться

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

@paramcallbackVoidFunction

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

@paramoptionsAfterRenderOptions | undefined

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

@returnsAfterRenderRef

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

Используйте afterEveryRender, чтобы читать или записывать данные DOM после каждого рендеринга.

Пример

@Component({
  selector: 'my-cmp',
  template: `<span #content>{{ ... }}</span>`,
})
export class MyComponent {
  contentRef = viewChild.required<ElementRef>('content');

  constructor() {
    afterEveryRender({
      read: () => {
        console.log('content height: ' + this.contentRef().nativeElement.scrollHeight);
      }
    });
  }
}

Описание

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

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

После каждого рендеринга обратные вызовы выполняются в следующем порядке этапов:
1. earlyRead
2. write
3. mixedReadWrite
4. read
Обратные вызовы на одном этапе выполняются в порядке их регистрации.
Обратные вызовы выполняются только в браузере и не выполняются на сервере.

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

Используйте afterEveryRender, чтобы читать или записывать данные DOM после каждого рендеринга.

Пример

@Component({
  selector: 'my-cmp',
  template: `<span #content>{{ ... }}</span>`,
})
export class MyComponent {
  contentRef = viewChild.required<ElementRef>('content');

  constructor() {
    afterEveryRender({
      read: () => {
        console.log('content height: ' + this.contentRef().nativeElement.scrollHeight);
      }
    });
  }
}