Angular中制作一个按钮组件

本文将会介绍如何在Angular中制作一个自定义按钮组件，直接在原生按钮上添加特性即可使用，还提供多种颜色方便切换。

预览

使用组件的方法如下，只需要在原生的button元素上加上 app-button 特性，该按钮也可变成一个特定组件，通过 color 特性，可以指定按钮的主题样式。

<button app-button color="primary" (click)="onClick($event)">测试</button>
<button app-button color="negative" (click)="onClick($event)">测试</button>

开发

创建组件

使用angular cli创建一个angular组件，请使用 generate component。

ng g c app-button

元数据特性

配置组件的元数据，修改 selector，指定该组件的调用方式以及该组件仅可以用于按钮元素。定义检测策略为 ChangeDetectionStrategy.OnPush，同时在host里需要指定一下主题的使用方式，这里加上了两个主题 primary 和 accent 。

@Component({
  selector: 'button[app-button]',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class.app-primary]': 'color === "primary"',
    '[class.app-negative]': 'color === "accent"',
  }
})

模板

组件模板中，使用angular提供给我们的内容投影来实现用户自定义组件内容，详细使用可以参考 官方文档-内容投影。

<div class="container">
    <ng-content></ng-content>
</div>

样式

在样式代码里，我们可以使用 :host 来完成对组件本身样式的修改，在其中定义两个颜色样式，分别是 app-primary 和 app-accent ，其中对组件的背景颜色做出区分。

$primary-color:rgb(0, 132, 15);
$negative-color:rgb(185, 30, 72);

:host {
  position: relative;
  border-radius: 8px;
  border: none;
  outline: none;
  padding: 1rem;
  transition: background-color .25s;
  overflow: hidden;
  color: white;

  &.app-primary {
    background-color: $primary-color;
  }

  &.app-negative {
    background-color: $negative-color;
    color: white;
  }

}

类

在组件类内部，我们定义一个公开字段 color 用来接收组件调用时传入的主题色配置，其中还使用到了 @HostBinding 和 @HostListener 来分别实现组件的属性监听和行为监听，更进一步，我们可以在此基础上实现类似material中按钮点击时出现波纹动画的效果。

export class ButtonComponent implements OnInit, OnDestroy {

  @Input()
  color: 'primary' | 'accent' = 'primary';

  @HostBinding('style.border') 
  border:string='1px solid #000';

  @HostListener("click")
  click() {
    console.log('按钮组件中点击事件')
  }

  constructor(
    private readonly _elementRef: ElementRef<HTMLButtonElement>,
    private readonly _focusMonitor: FocusMonitor
  ) { }

  ngOnInit(): void {
    this._focusMonitor.monitor(this._elementRef);
  }

  ngOnDestroy(): void {
    this._focusMonitor.stopMonitoring(this._elementRef);
  }

}

使用

只需要在原生按钮元素上加上特性，该按钮即可变成我们的组件按钮。其中，传入 color 来实现不同颜色的切换。

<button app-button color="primary" (click)="onClick($event)">测试</button>
<button app-button color="accent" (click)="onClick($event)">测试</button>

在组件类中实现对应的事件响应，在按钮点击的时候，会依次调用监听的事件响应。

export class AppComponent {
  title = 'test-com';

  onClick(e: Event): void {
    console.log('按钮真正的点击事件');
  }
}

// 点击会在控制台中输入下面两句话：
// 按钮组件中点击事件
// 按钮真正的点击事件