mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
docs: update references of afterEveryRender (#61159)
Since `afterRender` has been renamed `afterEveryRender`, some docs needed to be updated. PR Close #61159
This commit is contained in:
parent
55a0621cbd
commit
f06edf5fad
4 changed files with 14 additions and 14 deletions
|
|
@ -72,7 +72,7 @@ process.
|
|||
<td>Runs once the next time that <strong>all</strong> components have been rendered to the DOM.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>afterRender</code></td>
|
||||
<td><code>afterEveryRender</code></td>
|
||||
<td>Runs every time <strong>all</strong> components have been rendered to the DOM.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -219,16 +219,16 @@ here, attempting to
|
|||
change any state in this method results in
|
||||
an [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100).
|
||||
|
||||
### afterRender and afterNextRender
|
||||
### afterEveryRender and afterNextRender
|
||||
|
||||
The `afterRender` and `afterNextRender` functions let you register a **render callback** to be
|
||||
The `afterEveryRender` and `afterNextRender` functions let you register a **render callback** to be
|
||||
invoked after Angular has finished rendering _all components_ on the page into the DOM.
|
||||
|
||||
These functions are different from the other lifecycle hooks described in this guide. Rather than a
|
||||
class method, they are standalone functions that accept a callback. The execution of render
|
||||
callbacks are not tied to any specific component instance, but instead an application-wide hook.
|
||||
|
||||
`afterRender` and `afterNextRender` must be called in
|
||||
`afterEveryRender` and `afterNextRender` must be called in
|
||||
an [injection context](guide/di/dependency-injection-context), typically a
|
||||
component's constructor.
|
||||
|
||||
|
|
@ -237,9 +237,9 @@ See [Using DOM APIs](guide/components/dom-apis) for guidance on working with the
|
|||
|
||||
Render callbacks do not run during server-side rendering or during build-time pre-rendering.
|
||||
|
||||
#### afterRender phases
|
||||
#### after*Render phases
|
||||
|
||||
When using `afterRender` or `afterNextRender`, you can optionally split the work into phases. The
|
||||
When using `afterEveryRender` or `afterNextRender`, you can optionally split the work into phases. The
|
||||
phase gives you control over the sequencing of DOM operations, letting you sequence _write_
|
||||
operations before _read_ operations in order to minimize
|
||||
[layout thrashing](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing). In order to
|
||||
|
|
@ -327,7 +327,7 @@ ngDoCheck-->ngAfterViewInit
|
|||
ngAfterContentInit-->ngAfterContentChecked
|
||||
ngAfterViewInit-->ngAfterViewChecked
|
||||
end
|
||||
CHANGE--Rendering-->afterRender
|
||||
CHANGE--Rendering-->afterNextRender-->afterEveryRender
|
||||
```
|
||||
|
||||
### Subsequent updates
|
||||
|
|
@ -340,7 +340,7 @@ ngOnChanges-->ngDoCheck
|
|||
ngDoCheck-->ngAfterContentChecked;
|
||||
ngDoCheck-->ngAfterViewChecked
|
||||
end
|
||||
CHANGE--Rendering-->afterRender
|
||||
CHANGE--Rendering-->afterEveryRender
|
||||
```
|
||||
|
||||
### Ordering with directives
|
||||
|
|
|
|||
|
|
@ -367,7 +367,7 @@ bootstrapApplication(AppComponent, {
|
|||
|
||||
Some common browser APIs and capabilities might not be available on the server. Applications cannot make use of browser-specific global objects like `window`, `document`, `navigator`, or `location` as well as certain properties of `HTMLElement`.
|
||||
|
||||
In general, code which relies on browser-specific symbols should only be executed in the browser, not on the server. This can be enforced through the [`afterRender`](api/core/afterRender) and [`afterNextRender`](api/core/afterNextRender) lifecycle hooks. These are only executed on the browser and skipped on the server.
|
||||
In general, code which relies on browser-specific symbols should only be executed in the browser, not on the server. This can be enforced through the [`afterEveryRender`](api/core/afterEveryRender) and [`afterNextRender`](api/core/afterNextRender) lifecycle hooks. These are only executed on the browser and skipped on the server.
|
||||
|
||||
```angular-ts
|
||||
import { Component, ViewChild, afterNextRender } from '@angular/core';
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ Similarly, `NgZone.isStable` will always be `true` and should not be used as a c
|
|||
|
||||
The `NgZone.onMicrotaskEmpty` and `NgZone.onStable` observables are most often used to wait for Angular to
|
||||
complete change detection before performing a task. Instead, these can be replaced by `afterNextRender`
|
||||
if they need to wait for a single change detection or `afterRender` if there is some condition that might span
|
||||
if they need to wait for a single change detection or `afterEveryRender` if there is some condition that might span
|
||||
several change detection rounds. In other cases, these observables were used because they happened to be
|
||||
familiar and have similar timing to what was needed. More straightforward or direct DOM APIs can be used instead,
|
||||
such as `MutationObserver` when code needs to wait for certain DOM state (rather than waiting for it indirectly
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ Avoid calling functions like `effect` as part of template expressions, as those
|
|||
|
||||
Computed expressions are expected to be pure.
|
||||
Pure means that expression do not trigger any side effects.
|
||||
Side effects are operations like scheduling `afterRender`, creating a new `effect`, or subscribing to observables.
|
||||
Side effects are operations like scheduling `afterNextRender`/`afterEveryRender`, creating a new `effect`, or subscribing to observables.
|
||||
|
||||
Some operations are explicitly banned inside reactive contexts in order to avoid common pitfalls.
|
||||
As an example, using `afterRender` inside a `computed` will schedule new render hooks every time the computed expression evaluates.
|
||||
As an example, using `afterNextRender`/`afterEveryRender` inside a `computed` will schedule new render hooks every time the computed expression evaluates.
|
||||
This is likely not intended and could degrade application performance.
|
||||
|
||||
### Fixing the error
|
||||
|
|
@ -18,8 +18,8 @@ This is likely not intended and could degrade application performance.
|
|||
This error guide is non-exhaustive.
|
||||
It captures a few common scenarios and how to address the error.
|
||||
|
||||
#### `afterRender`
|
||||
Move the call for `afterRender` outside of the reactive context.
|
||||
#### `afterNextRender`/`afterEveryRender`
|
||||
Move the call for `afterNextRender`/`afterEveryRender` outside of the reactive context.
|
||||
|
||||
A good place to schedule the after render hook is in the component's class constructor.
|
||||
Alternatively, use `untracked` to leave the reactive context and explicitly opt-out of this error.
|
||||
|
|
|
|||
Loading…
Reference in a new issue