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

问题描述

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

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

在服务器端预渲染.如何在没有预渲染的情况下有效地在客户端强制执行此代码，而其他与服务器端预渲染适当配合的代码则留在服务器端预渲染?

was prerendered on server side. How to effectively enforce execution of this code on client side without prerendering, while other code that works appropriately with server side pre rendering leave to be pre rendered on there server-side?

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

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屋！