角度闪烁问题

Question

我将 Angular 19 与 SSR 结合使用，并且在更新到正确值之前，我有一个下拉列表暂时显示错误值（例如，第一个选项或默认值）。我需要下拉列表在渲染后立即显示正确的值。

当前行为：

下拉菜单短暂显示不正确或默认值（例如“所有类别”）一秒钟。片刻之后，它会根据路由参数或状态更新为正确的值。

预期行为：

下拉列表应在渲染后立即显示正确的值，而不闪烁或显示默认值。

https://stackblitz.com/github.com/illunix/flickering-issue-angular

当前行为

Answer 1

SSR 应该设置该字段，然后变得稳定，然后在服务器上提供 HTML，这种情况不会发生，直到那时您可以使用

defer

来解决，它只在浏览器上呈现，这是根据

Sam Scholefield

注释。

    @defer {
        <select
        #category
        name="categories"
        [(ngModel)]="selectedCategory"
        style="margin-right: 10px;"
        >
        @for (category of categoriesState.categories; track category;) {
        <option [value]="category.name">{{ category.name }}</option>
        }
        </select>
        <input [value]="selectedCategory()" />
    }