时间戳

首页 > 解决方案 > 将类添加到基于输入属性的组件的最佳方法是什么？

angular - 将类添加到基于输入属性的组件的最佳方法是什么？

问题描述

我正在尝试创建一个自定义按钮组件并基于一个属性，我需要添加一个特定的类，例如：

<mybutton primary>Primary button</mybutton>

需要在这个组件中添加这个类：

.primary {
   background-color: green;
}

我正在寻找关于如何制作这个的任何想法或教程

标签： angular

解决方案

  1. 当您需要在组件宿主元素上设置类时

在您的组件中添加以下mybutton内容：

import { Component, OnInit, Input, HostBinding } from '@angular/core';

...

@Input()
@HostBinding('class')
color = "primary"

这将通过输入接受一个值color，并将组件的宿主元素的类设置为传递的值。（默认值是主要的）

  1. 当您需要在组件内的元素上设置类时
@Input()
color = 'primary';

<button [ngClass]="color">
   <ng-content></ng-content>
</button>

这将通过color输入传递一个类名并通过设置button元素的类ngClass。

注意：

此外，如果您想在组件选择器之间显示文本（例如，Primary button在您的问题中），您必须添加：

<ng-content></ng-content>

在您的mybutton组件 html 中。

演示：

https://stackblitz.com/edit/custom-attributes

推荐阅读