[Angular 2] Building a Toggle Button Component

最新推荐文章于 2025-08-08 17:07:36 发布

weixin_34364071

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量98

点赞数

文章标签： javascript ViewUI

本文介绍如何从零开始构建一个 ToggleButton 组件，并在 Angular2 中使用它。涵盖的内容包括转置插入(transclusion)的使用、设置双向绑定及制作可复用组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

This lesson shows you how to build a Toggle Button in Angular 2 from scratch. It covers using transclusion in Angular 2, setting up your own two-way binding, and making the button into a reusable component.

toggle-button.ts:

import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
  selector: 'toggle-button',
  styles: [
    `
      .on{
        background-color: white;
        color: black;
      }
      
      .off{
        background-color: black;
        color: white;   
      }
    `
  ],
  template: `
    <button 
    (click)="onClick($event)"
    [ngClass]="on ? 'on' : 'off'">
      <ng-content></ng-content>
    </button>
  `
})
export class ToggleButton{
  @Input() on;
  @Output() onChange = new EventEmitter();
  onClick($event){
    this.on = !this.on;
    this.onChange.emit(this.on);
  }
}

app.ts:

import {Component} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {ToggleButton} from './components/toggle-button/toggle-button';

export interface AppState{
  todos: Todo[];
}
@Component({
  moduleId: module.id,
  selector: 'seed-app',
  providers: [],
  pipes: [],
  directives: [ToggleButton],
  template: `
  <toggle-button [(on)]="state">
    {{state ? 'On' : 'Off'}}
  </toggle-button>
`,
})
export class SeedApp {
  state = false;
}