Angular Flex 布局自定义断点不能与 SSR 一起使用答案

【问题标题】：Angulay Flex Layout Custom break points don't work with SSRAngular Flex 布局自定义断点不能与 SSR 一起使用
【发布时间】：2018-04-05 02:55:29
【问题描述】：

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

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 可以正常工作。

那么，我的问题是，为什么我执行不正确？

【问题讨论】：

标签： angular angular-flex-layout server-side-rendering

【解决方案1】：

对于@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

【讨论】：

【解决方案2】：

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

{
    provide: BREAKPOINT,
    useValue: CUSTOM_BREAKPOINTS
}

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

{
    provide: DISABLE_DEFAULT_BREAKPOINTS,
    useValue: true
}

在此之后，一切正常。

【讨论】：