javascript / expert
Snippet
Hydrations-sichere DOM-Interaktionen mit afterNextRender
In Angular-Anwendungen mit aktiviertem SSR und Hydration muss der direkte DOM-Zugriff bis zur clientseitigen Stabilisierung aufgeschoben werden. Der `afterNextRender`-Hook stellt sicher, dass der Code nur im Browser ausgeführt wird, verhindert Mismatch-Fehler und garantiert, dass `viewChild`-Elemente vor der Verwendung vollständig instanziiert sind.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Component, ElementRef, viewChild, afterNextRender } from '@angular/core';@Component({standalone: true,template: `<canvas #graphCanvas></canvas>`})export class ChartComponent {canvas = viewChild<ElementRef<HTMLCanvasElement>>('graphCanvas');constructor() {afterNextRender(() => {const ctx = this.canvas()?.nativeElement.getContext('2d');if (ctx) this.renderComplexVisualization(ctx);});}private renderComplexVisualization(ctx: CanvasRenderingContext2D) {// Client-side only rendering logic involving the DOM}}
angular
Erklärung
1
afterNextRender(() => {
Registriert einen Callback, der ausgeführt wird, sobald die gesamte Anwendung auf dem Client gerendert wurde.
2
const ctx = this.canvas()?.nativeElement.getContext('2d');
Greift sicher auf das native Element eines signalbasierten viewChild nach der Hydrations-Stabilisierung zu.