Angular Универсальная и ngx-конфигурируемая конфигурация - PullRequest
Новая
       63

Angular Универсальная и ngx-конфигурируемая конфигурация

0 голосов
/ 29 апреля 2020

Я пытаюсь преобразовать какое-то старое приложение в Angular универсальное (с Angular 9), и у меня возникла проблема с настройкой ngx-datable для работы с рендерингом на стороне сервера. Я следовал официальному руководству, как его настроить https://github.com/swimlane/ngx-datatable/blob/master/docs/universal/server-side-rendering.md

Но у меня проблема с размещением провайдеров 

providers: [
  {
    provide: ScrollbarHelper,
    useClass: ServerScrollBarHelper
  },
  {
    provide: DimensionsHelper,
    useClass: ServerDimensionsHelper
  }
];

Мой AppRoutingModule загрузка ленивых других подмодулей с помощью loadChildren. Я также использую SharedModule, где определены большинство моих провайдеров на стороне клиента.

Я обнаружил, что могу получить доступ к ServerScrollBarHelper и ServerDimensionsHelperthem, только если я определю их внутри подмодулей, но проблема в том, что они должны работать только при Angular рендеринге на стороне сервера. Я попытался поместить их в список AppServerModule провайдеров, но потом они как будто не определены.

Есть ли какой-нибудь пример этого, или кто-нибудь знает, как я могу легко загружать разных провайдеров для рендеринга сервера и клиента, не слишком меняя структуру своего приложения?

РЕДАКТИРОВАТЬ: так что я сузил мою проблему до ленивой загрузки, потому что с модулями layz-загрузки вы не можете переопределить своих провайдеров с AppRoutingModule, потому что каждый модуль использует свой собственный Инжектор. Я до сих пор не могу найти решение этой проблемы, не удаляя ленивую загрузку из проекта, что звучит неправильно.

1 Ответ

0 голосов
/ 30 апреля 2020

Мое текущее решение этой проблемы.

В каждом модуле с отложенной загрузкой я вводил ServerScrollBarHelper & ServerDimensionsHelper, чтобы иметь доступ к ним даже при отложенной загрузке. Но я изменил их код, чтобы они по-разному вели себя на сервере и в браузере. 

   import { Injectable, Inject, Injector, PLATFORM_ID } from '@angular/core';
import { Request } from 'express';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { DimensionsHelper } from '@swimlane/ngx-datatable';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Injectable()
export class ServerDimensionsHelper extends DimensionsHelper {

    clientRqst;
    constructor(@Inject(PLATFORM_ID) private platformId: Object, injectctor: Injector) {
        super();
        if (isPlatformServer(this.platformId)) {
            this.clientRqst = injectctor.get(REQUEST);
        }
    }

    getDimensions(element: Element): ClientRect {
        if (isPlatformBrowser(this.platformId)) {
            return super.getDimensions(element);
        } else {
            console.log(this.clientRqst.headers);
            const width = parseInt(this.clientRqst.headers.cookie['CH-DW'], 10) || 1000;
            const height = parseInt(this.clientRqst.headers.cookie['CH-DH'], 10) || 800;

            const adjustedWidth = width;
            const adjustedHeight = height;

            return {
                height: adjustedHeight,
                bottom: 0,
                top: 0,
                width: adjustedWidth,
                left: 0,
                right: 0
            };
        }
    }
}




import { ScrollbarHelper } from '@swimlane/ngx-datatable';
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { DOCUMENT, isPlatformBrowser } from '@angular/common';

@Injectable()
export class ServerScrollBarHelper extends ScrollbarHelper {
    width: number;

    constructor(@Inject(DOCUMENT) document, @Inject(PLATFORM_ID) private platformId: Object) {
        super(document);
        this.width = 16; // use default value
    }

    getWidth(): number {
        if (isPlatformBrowser(this.platformId)) {
            return super.getWidth();
        } else {
            return this.width;
        }

    }
}
...