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

Question

我只想添加一张小圆形个人资料照片，我不希望它出现在 "card" 中，像这样的东西确实有效：

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

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

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

Answer 1

从源码来看，mat-card-avatar指令无非是将mat-card-avatarclass赋值给指令的元素，只是增加了一点样式来产生头像外观.所以在 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;
}

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

Angular Material, using mat-card-avatar without a card

angular-material

angular-material2

angular