时间戳

首页 > 解决方案 > mat-card-avatar 在初始页面加载时未正确呈现

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

问题描述

我有一个简单的 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>

在第一次渲染时（即完全刷新浏览器），预期的圆形图标显示为正方形：

在此处输入图像描述

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

在此处输入图像描述

真正奇怪的是，我在很多页面上都使用了相同的基本布局，并且在某些页面上失败了，而在其他页面上却可以正常工作。大多数其他的工作往往更复杂。

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

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

有没有人遇到过这个问题或关于可能导致此问题的任何建议以及任何解决方法？

标签： angularangular-materialmaterial-design

解决方案

看起来问题是<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>

到一个根组件，这将解决树中所有组件的这个问题。

所有这些都是丑陋的，并且可能是非设计的行为，所以最好不要在 amat-card-avatar之外使用，mat-card但在紧要关头这会起作用。

推荐阅读