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-toolbar中有它。

Answer 1

从源代码来看， mat-card-avatar指令只是将mat-card-avatar类分配给指令的元素，后者只是添加了一些样式来生成头像外观。 因此在mat-card外使用它没有任何害处。

至于为什么通用的东西成为MatCard组件的一部分 - 可能是因为他们不想再花费额外的努力来测试和支持它与其他用法，并使MatCard与一般工作正常目的缩略图。 它也可能与Material Design指定作为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;
}