Angular Deferrable Views?
import {Component} from '@angular/core';
import {CommentsComponent} from './comments.component';
@Component({
selector: 'app-root',
template: `
<div>
<h1>How I feel about Angular</h1>
<article>
<p>
Angular is my favorite framework, and this is why. Angular has the coolest deferrable view
feature that makes defer loading content the easiest and
</p>
</article>
@defer (on viewport) {
<comments />
} @placeholder {
<p>Future comments</p>
} @loading (minimum 5s) {
<p>Loading comments...</p>
}
</div>
`,
standalone: true,
imports: [CommentsComponent],
})
export class AppComponent {}
import {Component} from '@angular/core';
@Component({
selector: 'comments',
template: `
<ul>
<li>Building for the web is fantastic!</li>
<li>The new template syntax is great</li>
<li>I agree with the other comments!</li>
</ul>
`,
standalone: true,
})
export class CommentsComponent {}
Soweit ist der Code verständlich, aber dieses @placeholder {
<p>Future comments</p>
}
Wird bei mir nicht angezeigt, wenn ich den Code ausführe ... Warum???
https://angular.dev/tutorials/learn-angular/10-deferrable-views
1 Antwort
In Angular gibt es einige spezifische Anforderungen und Bedingungen, die erfüllt sein müssen, damit die @placeholder-Anweisung korrekt funktioniert. Hier sind einige mögliche Gründe, warum der Platzhalter in deinem Code nicht angezeigt wird:
Viewport-Bedingung: Die @defer (on viewport)-Anweisung bedeutet, dass die CommentsComponent erst geladen wird, wenn sie in den sichtbaren Bereich des Viewports kommt. Wenn die Komponente also nicht sichtbar ist (z.B. wenn du die Seite nach unten scrollst), wird der Platzhalter möglicherweise nicht angezeigt.
Ladezeit: Wenn die CommentsComponent sofort geladen wird oder sehr schnell verfügbar ist, könnte der Platzhalter nur für einen sehr kurzen Moment angezeigt werden, bevor die Kommentare gerendert werden. In diesem Fall könntest du versuchen, eine künstliche Verzögerung einzuführen, um zu sehen, ob der Platzhalter dann erscheint.
Angular-Version: Stelle sicher, dass du eine Version von Angular verwendest, die das Deferrable Views-Feature unterstützt. Diese Funktionalität könnte in älteren Versionen nicht verfügbar sein.
Syntaxfehler: Überprüfe den gesamten Code auf Syntaxfehler oder andere Probleme, die das Rendering beeinträchtigen könnten.
Browser-Kompatibilität: Manchmal können bestimmte Browser oder deren Einstellungen das Verhalten von Angular beeinflussen. Teste deinen Code in verschiedenen Browsern.
Um sicherzustellen, dass der Platzhalter angezeigt wird, könntest du auch versuchen, den @defer-Befehl vorübergehend zu entfernen und zu sehen, ob der Platzhalter dann korrekt gerendert wird. Wenn das funktioniert, liegt das Problem wahrscheinlich an der Sichtbarkeit im Viewport oder an der Ladezeit der Komponente.
Wenn du weiterhin Probleme hast, wäre es hilfreich, mehr Informationen über deine Angular-Version und deine Entwicklungsumgebung zu haben.