Angular10 isPlatformBrowser()函数

在Angular10中，我们可以使用isPlatformBrowser()函数来检查当前应用程序是否在浏览器中运行。这个函数可以用于在服务器渲染时确定当前是否在服务器端运行，以及在客户端渲染时确定当前是否在浏览器中运行。

使用

在我们的组件中，我们需要导入PlatformLocation和PLATFORM_ID。

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

import { isPlatformBrowser } from '@angular/common';

然后，在我们的构造函数中，我们将PlatformLocation和PLATFORM_ID注入到组件中。

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

现在我们可以使用isPlatformBrowser()检查当前应用程序是否在浏览器中运行。

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

示例

在这个例子中，我们将向用户显示当前应用程序在哪个环境下运行。

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

import { isPlatformBrowser } from '@angular/common';
import { PlatformLocation } from '@angular/common';

@Component({
  selector: 'app-environment-info',
  templateUrl: './environment-info.component.html',
  styleUrls: ['./environment-info.component.css']
})
export class EnvironmentInfoComponent {

  isBrowser: boolean;

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

}

在这个组件中，我们将isBrowser设置为true或false，表示当前应用程序是否在浏览器中运行。然后，我们可以在模板中使用isBrowser来显示当前运行环境。

<p *ngIf="isBrowser">This application is running in the browser.</p>
<p *ngIf="!isBrowser">This application is running on the server.</p>

结论

isPlatformBrowser()函数是一个非常有用的函数，它可以用于检查当前应用程序是否在浏览器中运行。这个函数可以帮助我们在处理一些特殊情况时保持清晰的代码结构，例如在服务器端渲染时或在客户端渲染时进行调试。