如何更改*内部* 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 选择器inside。我可能错了。

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 */
}

Answer 2

在我看来你可以做的事情：

• 确保所有图标大小相同（例如样式img 具有恒定的宽度和高度）
• 使用flexboxes 在button 中设置模板样式。这样您就可以将您的项目对齐/对齐，使其垂直或水平居中。

Answer 3

您可以执行以下操作：

1) 添加一个布尔型输入变量来定义是否需要添加填充

2) 基于输入变量添加一个ngClass到img标签

3) 有一个单独的类，只有底部填充

最终的代码如下所示：

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 = '';
  @Input() addPadding = false;
  @Output() click = new EventEmitter<any>();

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

这是组件模板：

<button (click)="onClick()">
  <img src="../../../assets/icons/{{icon}}.{{fileType}}" [ngClass]="{ 'bottomPadding': addPadding }" />
  <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;
}
bottomPadding {
  bottom: 5px;
}

这里是你如何使用它：

<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"
    addPadding="true"
  ></rdc-dynamic-icon-button>