问题标签 [angular-material-stepper]

我需要在打字稿中访问步进器步骤中的所有组件，我有以下内容：

知道comp1并comp2实现IComp（自定义界面）

主要成分有

那么 MatStep 内部是否有类似 innerComponents 的东西？

我正在学习 React，我深入研究了钩子，因为它们很优雅，最大限度地减少了类的使用，并且（起初）看起来很容易理解。使用 Material-ui 的步进器和复选框组件。我正在尝试导出所选内容的值并将其显示在步进器的下一步中。已检查：这但在我的情况下似乎太复杂了。我不确定是否需要将状态数组作为道具传递并在返回 2 个复选框的组件时传递它，或者映射数组并通过函数传递它？

我正在尝试嵌套 Angular Material 步进器，以更好地建模业务逻辑（为简洁起见，省略了表单和其他步骤内容）：

嵌套步进器的步骤正在内部和外部步进器中呈现：

所以..

1. 我在这里做错了吗？
2. 有没有更好的方法来完成我所追求的？

Angular 有一个名为CdkStepper的“步进器”实现，它非常强大。基本上，CdkStepper 具有实现步骤的CdkStep DOM 子节点，并且很聪明地通过“下一个”和“上一个”事件在步骤之间推进。我需要编写一个多级步进器，如下所示：

在哪里my-stepper延伸CdkStepper和my-step延伸CdkStep。（那里缺少很多东西，但这抓住了要点。）阻止我的是这样CdkStepper做：

而不是这个：

这意味着顶层步进器会抓取从它下降的整个 DOM 树中的所有步骤。所以在这种情况下，它就像我说的那样：

这不太理想。我看过的解决方案包括：

• 我可以写一些特别的东西来复制大部分内容CdkStepper。（糟糕的想法。）
• 我可以复制整个实现，然后只改变一件事。（几乎一样可怕。）
• 我可以找到一种方法来覆盖CdkStepper.

一件事是行不通的；你不能在装饰器参数中有一个实例变量（所以我不能做类似的事情：

因为装饰器适用于类，而不是实例，因此this在这种情况下毫无意义。

那么我应该在这里做什么？有没有一种方法可以extends用来覆盖最小值并获得我想要的行为？还有什么？处理这种情况的最佳实践方法是什么？

这是我的变量所在的构造函数，我只想在 Horizo​​ntalLinearStepper 中传递这个变量...

我成功获取了值并将其设置为 this.state.area

这就是在第 1 步中我给组件仪表板的方式

现在我的问题是，从 stepper 到 Dashboard 传递带有其值的变量没有问题，但是如何从 Dashboard 到 stepper 传递变量？

我会在 Angular Material 项目中动态更改步进器的颜色。每一步我可以有多个状态。例如：

所以，这就是我到目前为止所做的

在这里我可以动态地改变文本的颜色。有用。但我无法更改步进器背景的颜色。我可以这样做：

但这里有另一个问题。这样我就不能设置两种不同的颜色。只有一个。我不能根据状态设置红色或绿色。有没有可能做到这一点？

如何从 Angular 材料步进器中删除数字？

我不希望用图标替换它们，我希望有一个空圆圈。

编辑：我正在使用角度 9

如何生成材料步进器？

我收到一个 JSON 文件，我需要从中生成步进器。使用时我根本无法显示任何内容[innerHTML]

这是我要实现的目标的示例：

事实上，当我尝试使用[innerHTML]这种方式时，它工作得很好：

我根本无法显示任何东西。即使我设置experienceDisplay为与删除的 HTML 完全一样。在 Firefox / Chrome 中查看检查器表明根本没有代码。

如何让我的代码显示？

PS：我对使用表单不感兴趣，我在尝试显示大量信息时使用步进器的可折叠属性。女巫是为什么状态设置为done并且[completed]变量始终设置为true

我正在使用垂直步进器，它适用于计算机屏幕。但是，当使用的屏幕太小而无法一次显示所有标题时，它会被替换为....

我怎样才能让它使用换行符而不是隐藏标题？

我正在使用的代码：

它产生以下结果：

但在小屏幕上它会被截断：

我怎样才能得到回车？

我在保持图像和包含文本的 div 以保持正确对齐时遇到问题。

如果屏幕很大，所有元素都会正确对齐，但如果屏幕太小（例如手机大小的屏幕），图像会被向上推，如下所示：

这是希望的结果（比如显示在大屏幕上）

我的代码如下（HTML）：

这是CSS：

如何让徽标在小屏幕上保持对齐？