angular - mat-card-avatar 在初始页面加载时无法正确呈现

Question

我有一个简单的 mat-card-avatar 布局，它在我的应用程序的许多页面的标题中显示一个圆形图标。我发现在许多页面上(但不是全部，即使使用相同类型的代码)也没有在初始渲染过程中正确渲染 mat-card-avatar。

我正在使用这段代码:

<h1 fxLayout="row">
      <div mat-card-avatar class="header-icon">
        <mat-icon>home</mat-icon>
      </div>
      Welcome {{ user.userName }}
</h1>

在第一次渲染时(即，浏览器完全刷新)，预期的圆形图标显示为正方形样式:

如果我然后导航到另一个具有相同布局样式的 View ，mat-card-avatar 会正确呈现，就像导航回原始 View 一样:

真正奇怪的是，我在很多页面上使用了相同的基本布局，并且在某些页面上如描述的那样失败了，而在其他页面上却有效。大多数其他起作用的往往更复杂。

我怀疑这是一个时间问题，但我查看了代码并尝试移动包含，但没有任何效果。同样可能与这种情况相反的是，图标显示的原色也来自样式 - 因此肯定会应用一些 Material 样式。

在调试器中查看呈现的 HTML，我发现呈现的 HTML 没有区别 - 相同的 HTML 标记、类和样式以两种方式呈现，这确实很奇怪。

有没有人遇到过这个问题或对可能导致此问题的原因和任何解决方法有任何建议？

Answer 1

看起来问题是缺少 <mat-card>实际组件中的元素。这就是为什么有些页面没有显示行为而其他页面显示的原因。

如果我将上面的代码包装成一个 <mat-card>阻止它工作。但只是一个空的 <mat-card>在页面上甚至可以使这项工作。

这很丑陋，但它有效:

<mat-card style="display: none"></mat-card>
<h1 fxLayout="row">
  <div mat-card-avatar class="header-icon">
    <mat-icon>home</mat-icon>
  </div>
  Welcome {{ user.userName }}
</h1>

您还可以添加:

<mat-card style="display: none"></mat-card>

到根组件，这将为树中下面的所有组件解决此问题。

所有这些都很丑陋，而且可能是非设计行为，因此最好不要使用 mat-card-avatar在 mat-card 之外但在紧要关头，这会奏效。