mat-card-avatar 在初始页面加载时无法正确呈现 [英] mat-card-avatar not rendering properly on initial Page Load

问题描述

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

我正在使用此代码:

<div mat-card-avatar class="header-icon"><mat-icon>home</mat-icon>

欢迎{{ user.userName }}

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

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

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

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

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

有没有人遇到过这个问题，或者对可能导致这种情况的原因和任何解决方法有任何建议?

解决方案

看起来问题在于实际组件中缺少 元素.这就是为什么有些页面没有显示行为，而其他页面却显示.

如果我将上面的代码包装到 <mat-card> 块中，它就可以工作.但只要页面上一个空的 <mat-card> 就可以做到这一点.

这很丑，但很管用:

<h1 fxLayout="row"><div mat-card-avatar class="header-icon"><mat-icon>home</mat-icon>

欢迎{{ user.userName }}

您也可以添加:

到一个根组件，这将为树中下面的所有组件解决这个问题.

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

I have a simple mat-card-avatar layout that displays a rounded icon in the header of many pages in my app. I'm finding that on many pages (but not all, even though using the same type of code) are not rendering the mat-card-avatar properly on the intitial rendering pass.

I'm using this code:

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

On first render (ie. with a full browser refresh) the expected rounded icon shows up on styled as a square:

If I then navigate to another view that has the same style of layout mat-card-avatar renders correctly, as it does if then navigate back the original view:

What's really strange is that I use the same basic layout on a lot of pages, and on some this fails as described while on others it works. Most of the others that do work tend to be more complex.

I suspect this is a timing issue, but I've looked at the code and experimented with moving includes around, but none of that has any effect. Also perhaps against that scenario is that the icon is displaying the primary color which also comes from styles - so some material styling is definitely applied.

Looking at the rendered HTML in the debugger I see no difference of the HTML rendered - same HTML markup, classes and styling either way it renders which is indeed strange.

Has anybody run into this or any suggestions on what might be causing this and any workarounds?

解决方案

Looks like the problem is the lack of a <mat-card> element in the actual component. That's why some pages were not showing the behavior while others do.

If I wrap the code above into an <mat-card> block it works. But just an empty <mat-card> on the page even makes this work.

This is ugly but it works:

<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>

You can also add this:

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

to a root component and that will solve this problem for all components below in the tree.

All of this is ugly, and probably non-designed behavior so it's best to not use mat-card-avatar outside of a mat-card but in a pinch this will work.

这篇关于mat-card-avatar 在初始页面加载时无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！