Angular Material，使用 mat-card-avatar 没有卡片答案

【问题标题】：Angular Material, using mat-card-avatar without a cardAngular Material，使用 mat-card-avatar 没有卡片
【发布时间】：2018-11-29 07:21:44
【问题描述】：

我只想添加一个小的圆形头像，我不希望它出现在“卡片”中，并且这样的东西实际上可以：

<img mat-card-avatar src="avatar.png" alt="User Avatar">

<img> 不包含在 <mat-card> 元素中，即使它有效，我也想知道解决方案的合法性和可能的副作用。那么在 mat-card 元素之外使用 mat-card-avatar 可以吗？

我也花了很长时间才找到这个指令，为什么头像名称空间应该是卡片的一部分，而它通常可以在其他上下文中使用？例如，我将它放在 mat-toolbar 中。

【问题讨论】：

标签： angular angular-material angular-material2

【解决方案1】：

从源代码来看，mat-card-avatar 指令只是将mat-card-avatar 类分配给指令的元素，这只是添加了一点样式来生成头像外观。所以在mat-card之外使用它并没有什么坏处。

至于为什么通用的东西成为 MatCard 组件的一部分 - 可能是因为他们不想付出额外的努力来测试和支持它的其他用途，并使 MatCard 正常工作带有通用缩略图。这也可能与 Material Design 将其指定为 Cards 的元素这一事实有关，尽管为 Lists（可能在其他地方）指定了相同的元素并且作为另一个指令 mat-list-icon 存在（样式代码略有不同）。将其归咎于团队中没有人真正关心此类小事。

使用它的一个不利方面是您必须导入整个 MatCard 模块才能使用它。如果您在应用程序中使用 mat-card 没问题，但如果您不使用它，它会为您的应用程序增加不必要的大小。最好只是窃取style code 并创建自己的类。

$mat-card-header-size: 40px !default;
.mat-card-avatar {
  height: $mat-card-header-size;
  width: $mat-card-header-size;
  border-radius: 50%;
  flex-shrink: 0;

  // Makes `<img>` tags behave like `background-size: cover`. Not supported
  // in IE, but we're using it as a progressive enhancement.
  object-fit: cover;
}

【讨论】：

我遇到了类似的问题 - 对我来说，头像呈现，但在第一页呈现时，如果当前组件堆栈中没有 mat-card，它将失败。重新渲染视图将渲染头像。相关问题：stackoverflow.com/questions/58864615/…
发生这种情况是有道理的 - 更有理由简单地使用您自己的样式类。