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

Question

我只是想添加一个小的圆形个人资料图片，我不希望它在“卡片”中，而这样的东西确实有效:

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

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

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

Answer 1

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

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

使用它的一个缺点是您必须导入整个 MatCard 模块才能使用它。如果您在您的应用程序中使用 mat-card 没问题，但如果您不这样做，它会为您的应用程序增加不必要的大小。最好只偷style code并创建您自己的类(class)。

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