afterNextRender — Angular

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

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

API

function afterNextRender<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 afterNextRender(
  callback: VoidFunction,
  options?: AfterRenderOptions | undefined,
): AfterRenderRef;

function afterNextRender<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

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

Используйте afterNextRender, чтобы один раз прочитать или записать данные в DOM, например для инициализации библиотеки, не относящейся к Angular.

Пример

@Component({
  selector: 'my-chart-cmp',
  template: `<div #chart>{{ ... }}</div>`,
})
export class MyChartCmp {
  chartRef = viewChild.required<ElementRef>('chart');
  chart: MyChart|null;

  constructor() {
    afterNextRender({
      write: () => {
        this.chart = new MyChart(this.chartRef().nativeElement);
      }
    });
  }
}

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

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

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

Обратите внимание: колбэк будет выполняться

в порядке регистрации
только в браузере
во время фазы mixedReadWrite

@paramcallbackVoidFunction

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

@paramoptionsAfterRenderOptions | undefined

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

@returnsAfterRenderRef

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

Пример

@Component({
  selector: 'my-chart-cmp',
  template: `<div #chart>{{ ... }}</div>`,
})
export class MyChartCmp {
  chartRef = viewChild.required<ElementRef>('chart');
  chart: MyChart|null;

  constructor() {
    afterNextRender({
      write: () => {
        this.chart = new MyChart(this.chartRef().nativeElement);
      }
    });
  }
}

Описание

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

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

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

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

Пример

@Component({
  selector: 'my-chart-cmp',
  template: `<div #chart>{{ ... }}</div>`,
})
export class MyChartCmp {
  chartRef = viewChild.required<ElementRef>('chart');
  chart: MyChart|null;

  constructor() {
    afterNextRender({
      write: () => {
        this.chart = new MyChart(this.chartRef().nativeElement);
      }
    });
  }
}