Angular Universal 和 ngx-datable 配置

Question

我正在尝试将一些旧应用程序转换为 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覆盖你的提供者，因为每个模块都使用他自己的注入器。如果不从听起来不正确的项目中删除延迟加载，我仍然找不到解决方案。

Answer 1

我目前对这个问题的解决方案。

在每个延迟加载的模块中，我注入了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;
        }

    }
}