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

没有服务器端渲染，这可以正常工作。启用后，我的布局不再响应。这是我的项目：my GitHub repository。应用常规规则来构建并运行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
}

在此之后，一切正常。查看commit了解详情。

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

Angulay Flex布局自定义断点不适用于SSR

2 个答案: