html - 如何更改 Angular 组件*内部*的 HTML 标签的样式？

Question

我有一个 Angular 组件，定义如下:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'rdc-dynamic-icon-button',
  templateUrl: './dynamic-icon-button.component.html',
  styleUrls: ['./dynamic-icon-button.component.scss']
})
export class DynamicIconButtonComponent {
  @Input() label = '';
  @Input() icon = '';
  @Input() fileType = '';
  @Output() click = new EventEmitter<any>();

  onClick() {
    this.click.emit();
  }
}

这是组件模板:

<button (click)="onClick()">
  <img src="../../../assets/icons/{{icon}}.{{fileType}}" />
  <span class="buttonLabel">{{ label }}</span>
</button>

这是 CSS:

button {
  font-size: 0.8em;
  width: 150px;
  height: 45px;
  background-color: white;
  color: #0066cc;
  border: 1px solid #0066cc;
  border-radius: 30px;
  padding: 1em;
}
// The button's icon
img {
  padding-right: 0.5em;
  position: relative;
  bottom: 5px;
}

现在我连续两次使用这个按钮组件，有两个不同的图标:

为了使左侧的图标与按钮标签正确对齐，我使用了 CSS 属性 bottom: 5px。但是由于这个按钮本质上是动态的，当然这个 CSS 规则将始终被使用，无论哪个图标最终被传递给组件。

在屏幕截图中，您可以看到右侧按钮中的心形图标被bottom: 5px 推得太高了。

如何只更改第二个按钮的 CSS 属性以更好地垂直放置心形图标？这是模板:

<rdc-dynamic-icon-button
        label="Share this page"
        icon="share_icon"
        fileType="svg"
        class="results-descr-button1"
      ></rdc-dynamic-icon-button>
      <rdc-dynamic-icon-button
        label="Save this page"
        icon="fill-1"
        fileType="svg"
        class="results-descr-button2"
      ></rdc-dynamic-icon-button>

一位同事建议使用 [ngStyle]，但根据我通过谷歌搜索所见，它仅在选择特定 HTML 标记时有用，不能用于选择 Angular 组件内部的 CSS 选择器。我可能是错的。

Answer 1

您是否尝试过将 id="" 添加到第二个按钮并将 CSS 调整为仅该按钮？像这样:

<rdc-dynamic-icon-button
  id="saveBtn"
  label="Save this page"
  icon="fill-1"
  fileType="svg"
  class="results-descr-button2"
></rdc-dynamic-icon-button>

在你的 CSS 中:

rdc-dynamic-icon-button#saveBtn {
    bottom: 0; /* or whatever value you find works */
}

如果这不起作用，您可以尝试进一步细化范围:

rdc-dynamic-icon-button#saveBtn img {
    bottom: 0; /* or whatever value you find works */
}

或者使用附加到第二个按钮的 class 作为精炼器:

.results-descr-button2 img {
    bottom: 0; /* or whatever value you find works */
}