我有一个简单的垫卡头像布局,它在我的应用程序的许多页面的标题中显示圆形图标。我发现在许多页面上(但不是所有页面,即使使用相同类型的代码)都没有渲染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 标记、类和样式,无论以哪种方式渲染,这确实很奇怪。
有没有人遇到过这个问题,或者对可能导致这个问题的原因以及任何解决方法有任何建议?
看起来问题是缺少一个<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
但在紧要关头这会起作用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)