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

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>

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

3 个答案: