问题标签 [angular-flex-layout]

我使用 Angular Material 2，我想要一个卡片标题图标按钮。如何将按钮设置在右侧？

我的计划：

当前网站：

我想在标题中设置按钮。我该怎么做？我排除了类别代码，因为没有问题。在打字稿代码中，只有一个用于添加更多卡片的 for 循环和一个用于单击卡片的虚拟方法。

天琴座

我正在使用 Angular(v5.0.2) 和 Angular-FlexLayout (v2.0.0-beta.10-4905443)。我正在尝试对@angular/flex-layout 提供的每个指令使用自定义断点。

我添加了自定义断点：

我扩展了 ShowHideDirective：

删除@Optional() @Self()以保持更接近文档会触发错误：No provider found for LayoutDirective. 添加到提供程序会触发与此处LayoutDirective, ElementRef相同的错误。因此，我在源代码之后扩展了该类。

我使用我在 app.module 中定义的内容：

我根据屏幕的大小显示或隐藏元素：

因此，预期的行为如下： - 无论屏幕大小如何，每行只显示一个项目，除了最后一个项目，其中显示所有可用的 mediaQueries - 每行显示 fxHide 或 fxShow，具体取决于屏幕大小

实际行为如所附屏幕截图所示：大屏幕，自定义媒体查询已激活，小屏幕。

您会看到 ShowHideDirective 不再适用于默认断点。此外，当自定义断点处于活动状态时，我可以隐藏一个元素，但相反的行为不起作用。

我已经将我所有的 npm 包更新到最新可用的，删除 node_modules 文件夹并npm install再次运行，但没有效果。

我还尝试添加LayoutDirective, ElementRef到提供者列表中。然后我得到与这里相同的错误。

showSmLandscape在my的方法中添加 printCustomShowHideDirective表明该方法确实被调用，并且具有正确的参数（据我所知）。fxShow 也是如此。

show在and中添加相同类型的调试hide（直接在我的 node_modules 文件夹中）表明ShowHideDirective使用正确的值调用了。

欢迎任何想法/提示/评论。由于从 rxjs 加载运算符时出错，我还没有设法创建一个 plunker...

编辑：终于可以在这里使用工作的 plunker （工作意味着显示意外行为 ^^）

感谢您的任何贡献；）

我有一个图片库，我想在一个基于宝丽来卡片的系统中显示它们，该系统跨越多行和多列。我面临的问题与图像的布局有关。当图像同时是纵向和横向时，横向图像的 mat-card 属性会膨胀以匹配纵向图像的大小。我怎样才能拥有一个自然填充系统，其中 mat-card 可以适应图像的宽度/高度比？

HTML：

CSS：

目前看来：

这就是我想要实现的目标：

谢谢！

我目前正在使用运行循环并将多个容器显示为列表（数千个结果）的 Angular 5。

您还可以看到我正在使用一个 Flex Layout ngClass，它根据元素的索引向容器添加一个类。前三个容器是大型的（33.33%），接下来的 4 个是中型的（25%），其余的都是小型的（20%）。但是，我希望每个元素之间有 24px 的空间；我只想要容器之间的空间，而不是左端或右端。

这是我目前拥有的 CSS。

如您所见，我在每个容器的右侧和底部添加了 24px 的填充。然后我选择每行的最后一个元素并忽略填充。这个解决方案的问题是最后一个元素总是比之前的容器宽 24px。我需要它们都具有相同的宽度。有什么想法吗？

好吧，我的 css 技能不是那么好......所以这可能是显而易见的，但我无法追踪这个问题的原因。

我mat-nav-list在一个带有 Angular Flex 布局的 div 中有一个 Angular Material Nav 列表：fxFlexOffset.gt-sm="15%" fxFlex.gt-sm="70%"

一切都很好，直到我低于 xs 断点。具有长文本的列表项不再被截断，并导致卡片的宽度超出屏幕宽度......

当我删除 fxFlex 属性时，问题就消失了。

Stackblitz 与 flex

没有弹性的 Stackblitz

我有这些代码块

我希望这些东西在我使用时位于同一行fxFlex="40%"但是，它们出现在不同的行上

我正在尝试实现具有角度和弹性布局的“类似 Google Plus”的多列响应式页面布局。

我有响应式多列工作。- 见Stackblitz

但是如何安排它堆叠的行布局？我在尝试：

但这不会“堆叠”卡片。

这就是我想要实现的目标：

我们正在使用angular-flex-layout在我们的应用程序中进行大小调整。我们在应用程序的多个位置使用了多个标签。例如，此块用于所有“顶级”div。

我试图弄清楚如何改变它，这样如果我们以后想重构，我们只需要改变一个地方。

我考虑过的选项：

选项 #1 - 不要为此使用 fxFlex

也许这是一个不适用于 fxFlex 的用例。我想我可以这样做：

然后我可以使用媒体查询编写 CSS 来处理多个页面宽度。呸。真的不想这样做。

选项 #2 - 使用 fxFlex 并创建一个新指令

这允许我们做这样的事情：

然后我们可以定义一个指令来做这样的事情：

不确定是否有可能添加指令。还在研究这个。

选项 #3 - 其他...

我认为这一定是一个相当普遍的问题。也许有一个开箱即用的解决方案。

谢谢！

我正在尝试将 2 个元素彼此相邻放置，其中一个元素占据屏幕的 25%，另一个是一个角路由器插座，它占据了容器的其余部分。使用以下内容最终会在屏幕两侧使用两个元素，中间有空格。** 部分是有问题的部分

出来看起来像

左侧的 admin-route-menu 标记只是基本的 html 和 css，其中 html 中有一个 mat-list。路由器插座可以根据角度规格采用任何元素。如果这也有帮助，我可以包括 admin-route-menu。

我也尝试过使用常规的弹性盒子，但结果是一样的。

任何帮助表示赞赏，谢谢

我的HTML如下：

组件的 CSS 代码：

上面的代码给出了如下图所示的输出：

我的问题是我似乎无法获得绿色垫卡的高度以适应其内容，例如height: auto;您能否帮助我解决我可能做错的事情，或者建议一种更好的方法来实现要求的行为。另外值得一提的是，在台式机上高度可以很好地调整，只有在移动设备上它没有做到这一点。如果我对高度进行硬编码，它可以工作，但此时这是不可取的。没有 CSS 应用于管理此 mat-card 的类。

编辑 .product_details mat-card