angular - Flexlayout 不适用于 Angular 通用

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 的发布而得到解决。