Angular isPlatformBrowser检查PLATFORM_ID不会阻止服务器端预渲染 [英] Angular isPlatformBrowser checking against PLATFORM_ID doesn't prevent server-side pre rendering

问题描述

我正在尝试使用此提示编译基于示例项目在此处创建的Angular 4 + ASP.NET Universal应用程序

I am trying to compile Angular 4 + ASP.NET Universal application created based on sample project here, using this hints https://github.com/angular/universal#universal-gotchas and when I build project with webpack, and then run it there is error thrown as the code that was encapsulated inside if block checked against

isPlatformBrowser

isPlatformBrowser

已在服务器端呈现.

这是我的组件，其中的Leaflet代码封装在条件块中，用于检查平台是否为Browser.

Here's my Component with Leaflet code encapsulated inside conditional block checking whether platform is Browser or not.

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
        }
    }

}

推荐答案

您可以使用*ngIf从DOM中删除一些元素.将当前状态写入组件的属性，然后在html文件中进行检查.

You can remove some elements from your DOM by using *ngIf. Write the current state into a property of your component and check this within your html file.

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生效后，该元素突然出现.

This will on the server side create a DOM that doesn't contain md-select and so doesn't fail. But be aware that this could lead to some unexpected changes of what the user sees, cause the site will first be rendered in the browser without the element (cause that's what the server delivered) and after javascript is loaded and angular took into action the element suddenly appears.

这篇关于Angular isPlatformBrowser检查PLATFORM_ID不会阻止服务器端预渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！