Angular Flex Layout 自定义断点不适用于 SSR

Question

我只需要 Angular Flex Layout 中的两个断点。所以，我定义了：

const CUSTOM_BREAKPOINTS: BreakPoint[] = [{
  alias: 'lg',
  mediaQuery: '(min-width: 700px)',
}, {
  alias: 'sm',
  mediaQuery: '(max-width: 700px)',
}];

export function getCustomBreakpoints() {
  return CUSTOM_BREAKPOINTS;
}

@NgModule({
  providers: [{
    provide: BREAKPOINTS,
    useFactory: getCustomBreakpoints
  }]
})
export class AppModule { }

这在没有服务器端渲染的情况下工作正常。一旦我启用它，我的布局就不再响应。一般规则适用于构建和运行它作为 here.

当我使用 SSR 运行这个项目时，我总是得到中间区域有三个中心行部分的布局布局，而不是将所有内容都放在一列中。

没有我的自定义断点，Angular Flex Layout 工作正常。

所以，我的问题是，为什么我实施不正确？

Answer 1

实际上，我的方法一般不适用于 AOT。在查看 Angular Flex Layout 中的 BREAKPOINTS token 实现后，我发现它通过使用 BREAKPOINT 令牌注入了一个断点数组。所以，我为我的列表提供了这个标记：

{
    provide: BREAKPOINT,
    useValue: CUSTOM_BREAKPOINTS
}

然后，我看到他们将我的自定义数组与默认断点数组合并，除非 DISABLE_DEFAULT_BREAKPOINTS 标记被禁用。所以，我禁用了它：

{
    provide: DISABLE_DEFAULT_BREAKPOINTS,
    useValue: true
}

在此之后，一切正常。

Answer 2

似乎提供自定义断点是 @angular/flex-layout 库目前正在发生变化的事情。这个 git 问题：

https://github.com/angular/flex-layout/issues/821

表示他们正在等待完成新的重大更改后更新文档。

但是，显然有两种自定义断点的方法，一种是使用您提到的 BREAKPOINTS 令牌提供程序，另一种是将它们作为参数传递给 FlexLayoutModule：

FlexLayoutModule.withConfig({}, CUSTOM_BREAKPOINTS),

第二种方法对我有用 Angular 8 和 @angular/flex-layout@8.0.0-beta.25

有关更多信息，请参阅 wiki 中的配置页面 - https://github.com/angular/flex-layout/blob/master/guides/Configuration.md

Angular Flex Layout 自定义断点不适用于 SSR

Angulay Flex Layout Custom break points don't work with SSR

angular

angular-flex-layout

server-side-rendering