Flexlayout 不适用于角度通用

Question

我创建了一个 angular 通用和 pwa 应用程序。我正在使用带有 flexlayout 的 mat-toolbar 创建导航栏。

我已经在我的模块中导入了 FlexLayoutModule、FlexLayoutServerModule。

我的示例导航栏是

<div [hidden]="loading" class="example-container">
  <mat-toolbar class="example-toolbar">
    <span>Navigation</span>
    <span class="example-spacer"></span>
    <div fxShow fxHide.lt-md>
      <a href="#" mat-button>Menu Item 1</a>
      <a href="#" mat-button>Menu Item 2</a>
    </div>
    <div fxHide fxShow.gt-sm>
      <a href="#">Show Side Menu</a>
    </div>
  </mat-toolbar>
</div>

Answer 1

您必须在 FlexLayoutModule 之后导入 FlexLayoutServerModule。

 imports: [
    ... other imports here
    FlexLayoutServerModule
  ]

此导入应该发生在您的 ServerModule 中。

这是一个链接，显示了 FlexLayoutModule 与 Angular Universal 的正确使用：https : //github.com/angular/flex-layout/wiki/Using-SSR-with-Flex-Layout
如果您包含 FlexLayoutModule，请注意在延迟加载的模块中，仍然可能存在问题。随着 v6 的发布，这些问题有望得到解决。