web-dev-qa-db-ja.com

Angular isPlatformBrowserがPLATFORM_IDをチェックしても、サーバー側のプリレンダリングは妨げられません

このヒントを使用して、ここのサンプルプロジェクトに基づいて作成されたAngular 4 + ASP.NET Universalアプリケーションをコンパイルしようとしています https://github.com/angular/universal#universal- gotchas そして、webpackを使用してプロジェクトをビルドし、それを実行すると、ブロックがチェックされた場合に内部にカプセル化されたコードとしてエラーがスローされます

isPlatformBrowser

はサーバー側で事前レンダリングされました。サーバー側のプリレンダリングで適切に機能する他のコードをサーバー側でプリレンダリングしたまま、クライアント側でこのコードの実行を効果的に強制する方法はありますか？

これは、プラットフォームがブラウザであるかどうかをチェックする条件付きブロック内にカプセル化されたリーフレットコードを含む私のコンポーネントです。

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

}
angularangular-universal
8
Michał Ziobro

*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アクションを実行すると、要素が突然表示されます。

1
Oliver