app-stepper.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

/**
 * 步进器
 *
 * @export
 * @class AppStepper
 */
@Component({
    selector: 'app-stepper',
    templateUrl: './app-stepper.html',
    styleUrls: ['./app-stepper.scss']
})
export class AppStepper {
    /**
     * 输入值
     *
     * @memberof AppStepper
     */
    @Input()
    set value(val: any) {
        if (val !== undefined) {
            if (typeof(val) === 'string' && !Object.is(val, '')) {
                try {
                    this.$value = parseInt(val, 10);
                } catch (error) {
                    console.error(error);
                }
            } else {
                this.$value = val;
            }
        }
    }
    @Output()
    valueChange: EventEmitter<number> = new EventEmitter();
    /**
     * 是否启用
     *
     * @type {boolean}
     * @memberof AppStepper
     */
    @Input()
    disabled: boolean;
    /**
     *
     *
     * @private
     * @type {number}
     * @memberof AppStepper
     */
    private $value: number = 0;

    set stepperValue(val: number) {
        this.$value = val;
        this.valueChange.emit(this.$value);
    }
    get stepperValue(): number {
        return this.$value;
    }

}