角材料，使用不带卡的垫卡式头像

Question

我只想添加一个小的圆形个人资料图片，我不希望它出现在“卡片”中，并且类似这样的方法实际上有效：

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

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

同样，我花了很长时间才找到该指令，为什么头像通常在其他情况下可以使用，所以将头像名称间隔为卡片的一部分？例如，我在垫子工具栏中有它。

Answer 1

从源代码来看，该mat-card-avatar指令仅将mat-card-avatar类分配给指令的元素，而只是添加了一些样式以产生化身外观。因此，在.NET之外使用它没有害处mat-card。

至于为什么通用的东西成为MatCard组件的一部分-可能是因为他们不想付出额外的努力来测试和支持其他用途，并使MatCard在通用的情况下正常工作目的缩略图。可能还与材料设计将其指定为Cards的元素有关，尽管为Lists（可能还有其他地方）指定了相同的元素，并且作为另一个指令存在mat-list-icon（样式代码略有不同）。认真对待像这样的小事情，让团队中的每个人都无法接受。

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

$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;
}