Angular10 isPlatformServer()函数介绍

在 Angular10 中，有一个非常重要的函数叫做 isPlatformServer()，它主要用于检测代码是否正在运行于服务器端。在 SSR （Server Side Rendering，即服务器端渲染）的场景中，我们需要判断当前代码是否在服务器端运行，才能以正确的方式进行渲染。

使用方法

isPlatformServer() 函数需要和Angular依赖注入机制一起使用。我们可以在构造函数中注入 PLATFORM_ID，然后在使用 isPlatformServer() 函数时，将 PLATFORM_ID 作为参数传入。

示例代码如下：

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

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngOnInit() {
    if (isPlatformServer(this.platformId)) {
        // 在服务器端运行
    } else {
        // 在浏览器端运行
    }
}

在服务器端运行时，我们可以使用 ServerTransferStateModule 模块来传递数据。

注意事项

需要注意的是，在使用 isPlatformServer() 函数时，必须注入 PLATFORM_ID，否则会发生运行时错误。

示例代码如下：

constructor(private platformId: Object) {}

ngOnInit() {
    if (isPlatformServer(this.platformId)) {
        // 在服务器端运行
    } else {
        // 在浏览器端运行
    }
}

另外，需要注意的是，在渲染时，必须使用 stringify() 函数将传递的 JavaScript 对象转换成字符串，否则在浏览器端可能会出现无法解析的错误。

示例代码如下：

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { ServerTransferStateModule, ServerStateTransferService } from '@angular/platform-server';

constructor(
    private transferState: ServerStateTransferService,
    @Inject(PLATFORM_ID) private platformId: Object
) {}

ngOnInit() {
    if (isPlatformServer(this.platformId)) {
        this.transferState.set('myData', { name: 'John' });
    } else {
        const myData = JSON.parse(this.transferState.get('myData', undefined));
        console.log(myData.name); // 输出 "John"
    }
}

以上就是 Angular10 isPlatformServer() 函数的介绍和使用方法，希望对大家有所帮助。