Angular 17 SSR下客户端特性无法执行，如何强制组件客户端运行？

以下是几种替代Next.js use client 指令的实现方式，确保组件仅在浏览器环境中运行：

1. 用isPlatformBrowser结合*ngIf条件渲染 #

通过Angular内置的平台判断工具，仅在浏览器环境下渲染目标组件：

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-root',
  template: `<app-client-specific-component *ngIf="isBrowser"></app-client-specific-component>`
})
export class AppComponent {
  isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }
}

2. 封装通用客户端包装组件 #

创建一个可复用的包装组件，所有需要仅客户端执行的组件都可以嵌套在其中：

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-client-only',
  template: `<ng-content *ngIf="isBrowser"></ng-content>`
})
export class ClientOnlyWrapperComponent {
  isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }
}

使用方式：

<app-client-only>
  <app-your-client-component></app-your-client-component>
</app-client-only>

3. 在组件内部延迟执行客户端逻辑 #

如果组件包含DOM操作、window对象调用等浏览器专属代码，可在AfterViewInit钩子中判断平台后执行：

import { Component, Inject, PLATFORM_ID, AfterViewInit } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-client-component',
  template: `<div #clientElement></div>`
})
export class ClientComponent implements AfterViewInit {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 此处编写仅客户端运行的逻辑
      console.log('仅在浏览器中执行');
      // 比如操作DOM、初始化第三方客户端库等
    }
  }
}

4. 结合Angular 17的defer指令（可选） #

如果希望组件懒加载且仅在客户端渲染，可将defer与平台判断结合：

@defer (on viewport) {
  <app-client-component *ngIf="isBrowser"></app-client-component>
} @loading {
  <p>加载中...</p>
}

内容的提问来源于stack exchange，提问作者Just V