Question

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

isPlatformBrowser

已在服务器端预呈现。如何在不预渲染的情况下有效地在客户端执行此代码，而其他适用于服务器端预渲染的代码则在服务器端预先呈现？

这是我的Component with Leaflet代码封装在条件块中，检查平台是否是浏览器。

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之后，角度生效了元素突然出现了。

针对PLATFORM_ID的Angular isPlatformBrowser检查不会阻止服务器端预呈现

1 个答案: