Angular 和 NGX-Masonry - 显示问题答案

【问题标题】：Angular and NGX-Masonry - display issueAngular 和 NGX-Masonry - 显示问题
【发布时间】：2021-03-26 05:31:37
【问题描述】：

我想将 Masonry 集成到 Angular 应用程序中。我安装了ngx-masonry library。
问题：渲染时，我的页面在标题和砌体内容之间存在巨大差距。我的预期行为：每张卡片都应该从最顶部开始。

Screenshot with percentage width like it should be at the end （第一张卡片是从底部开始的灰色框）

在该间隙下方，卡片按预期对齐。

这是我的 html 文件中的代码（简化了，实际上我在“正常”宽度中有一个宽度为 2 和 7 的项目。我希望这就足够了）

<div class="grid-container">
  <h1 class="mat-h1">Headline</h1>
  <ngx-masonry [options]="{itemSelector: '.masonry-item', columnWidth: '.grid-sizer', percentPosition: true }">

    <div class="grid-sizer"></div>

    <ngxMasonryItem class="masonry-item masonry-item--width2">
      <app-card id="card1" title="card 1 in full width">
        <app-card1> </app-card1>
      </app-card>
    </ngxMasonryItem>

    <ngxMasonryItem class="masonry-item">
      <app-card id="card2" title="card 2 with other width">
        <app-card2></app-card2>
      </app-card>
    </ngxMasonryItem>
</ngx-masonry>
<div>

这是我的 sass 文件中的代码：

.grid-sizer, 
.masonry-item {
  width: 50%;
}

.masonry-item--width2 {
  width: 100%;
}

masonry 和标题标签周围的网格容器 div 没有任何自定义样式。

我没有对砌体的component.ts进行任何更改（仅用于其他内容相关的东西，我不允许分享）。

我试图给所有项目一个固定的宽度，而不是用百分比来做。我对 200px 中每个项目的结果也非常不令人满意： Example with fix width

我找不到任何关于此类问题的信息。

如果这很重要：我的项目中也包含角材料。

感谢您的帮助，如果有任何不清楚的地方，我很乐意分享更多信息。

【问题讨论】：

我也遇到了同样的问题！

标签： angular angular-material masonry

【解决方案1】：

我找到了解决办法：

使用@ViewChild(NgxMasonryComponent) masonry: NgxMasonryComponent;，您可以访问砌体对象并单独调用函数。

并且使用 this.masonry.reloadItems(); 和 this.masonry.layout(); 您可以“刷新”布局，这对我来说就像一个魅力。

reloadMasonryLayout() {
    if (this.masonry !== undefined) {
      this.masonry.reloadItems();
      this.masonry.layout();
    }
  }

我在 ngOnInit 中调用这个函数，每当布局发生变化时（由于卡片顺序）

I found this solution in a demo on github

【讨论】：