Angular isPlatformBrowser 检查 PLATFORM_ID 不会阻止服务器端预渲染

Question

我正在尝试使用此提示编译基于示例项目创建的 Angular 4 + ASP.NET 通用应用程序 https://github.com/angular/universal#universal-gotchas当我用 webpack 构建项目，然后运行它时，会抛出错误，因为如果检查 block ，则封装在里面的代码

isPlatformBrowser

在服务器端预呈现。如何在不进行预渲染的情况下有效地在客户端强制执行此代码，而与服务器端预渲染适当配合的其他代码则在服务器端进行预渲染？

这是我的组件，Leaflet 代码封装在条件 block 中，用于检查平台是否为浏览器。

import {Component, OnInit, Inject} from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import * as L from 'leaflet';


@Component({
    selector: 'leaflet-map',
    templateUrl: 'leaflet-map.component.html',
    styleUrls: ['leaflet-map.component.css', '../../../..//node_modules/leaflet/dist/leaflet.css'],
})
export class LeafletMapComponent implements OnInit { 

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

    ngAfterViewInit() { 

       
    }

    ngOnInit() {  
        if (isPlatformBrowser(this._platformId)) {
             L.map('leafletMap').setView([50.08, 19.93], 13);
        }
        if (isPlatformServer(this._platformId)) {
            // Server only code.
            // https://github.com/angular/universal#universal-gotchas
        }
    }
  
}

Answer 1

您可以使用 *ngIf 从 DOM 中删除一些元素。将当前状态写入您的组件的一个属性，并在您的 html 文件中检查它。

component.ts

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

@Component({
  selector: 'mySpecial',
  templateUrl: './mySpecial.component.html'
})
export class MySpecialComponent {
  isBrowser: boolean;

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

component.html

<h2>Hello World</h2>
<p>
  <md-select *ngIf="isBrowser" placeholder="Favorite food" name="food">
    <md-option value="Steak">Steak</md-option>
    <md-option value="Pizza">Pizza</md-option>
    <md-option value="Tacos">Tacos</md-option>
  </md-select>
</p>

这将在服务器端创建一个不包含 md-select 的 DOM，因此不会失败。但请注意，这可能会导致用户看到的内容出现一些意想不到的变化，因为网站将首先在没有元素的情况下在浏览器中呈现(因为这是服务器提供的内容)，并且在加载 javascript 并且 angular 采取行动之后元素突然出现。