1

我想使用 canvas 元素在 Angular 2 中创建一个圆形进度条。我在 Angular 1 中完成了多个项目，但我对 Angular 2 和 TypeScript 完全陌生，所以我有点步履蹒跚……

我创建了一个ProgressCircle组件，并使其可注入，因此我可以在其他组件中使用它。此进度组件从父组件接收几个属性，这些属性确定进度圈的外观以及填充方式。

注意：我从一个旧的 ES5 项目中提取了这段代码。这可能表明。

import { Component, Input, Injectable, ElementRef, AfterViewInit } from '@angular/core';

@Injectable()
@Component({
    selector: 'progress-circle',
    template: `
        <div class="progress-indicator" [style.width]="size + 'px'" [style.height]="size + 'px'">
            <canvas [attr.width]="size" [attr.height]="size"></canvas>
            <span class="progress-text-container">
                <span class="progress-text">{{ progress }}</span>
            </span>
        </div>
    `
})
export class ProgressCircle implements AfterViewInit {
    @Input() size:number;
    @Input() progress:number;
    @Input() lineWidth:number;
    @Input() rotate:number;
    @Input() color:string;
    @Input() trackColor:string;
    @Input() bgColor:string;
    @Input() borderWidth:number;
    @Input() animate:boolean;

    constructor(private el:ElementRef) {}

    ngAfterViewInit() {
        this.draw();
    }

    draw() {
        let canvas = this.el.nativeElement.getElementsByTagName('canvas')[0],
            ctx    = canvas.getContext('2d'),

            options = {
                percent: this.progress || 0,
                size: this.size || 90,
                lineWidth: this.lineWidth || (this.size / 10) || 10,
                rotate: this.rotate || 0,
                color: this.color || '#000',
                trackColor: this.trackColor || '#e6e6e6',
                bgColor: this.bgColor || 'transparent',
                borderWidth: this.borderWidth || 0,
                doAnimate: this.animate
            },

            radius = (options.size - options.lineWidth) / 2,
            progress = 0,
            fillColor:string = undefined,

            animFrame:number, bg:ImageData;

        let drawCircle = (strokeColor:string, fillColor:string, percent:number, hasBorder:boolean = false) => {
            // logic to draw circle goes here
        }

        let animateProgess = () => {
            if (++progress <= options.percent) { // we need to animate
                // draw circle
                animFrame = window.requestAnimationFrame(animateProgess);
            }
        }

        ctx.translate(options.size / 2, options.size / 2);
        ctx.rotate((-.5 + (options.rotate / 180)) * Math.PI);

        if (options.doAnimate) {
            bg = ctx.getImageData(0, 0, canvas.width, canvas.height);
            animFrame = window.requestAnimationFrame(animateProgess);
        } else {
            drawCircle(options.color, fillColor, options.percent);
            this.progress = Math.floor(options.percent); 
        }
    }
}

现在，这工作正常。但是progress来自父组件的输入变量可能随时改变。如何在适当的时间触发重绘进度条？

在加载视图（因此调用 ngAfterViewInit）之前，我无法初始化进度条，否则它看起来很时髦，因为画布元素尚未完全初始化。我已经查看了 ngOnChanges 生命周期钩子，但它没有用，因为它在视图加载之前首先触发。

我的一个想法是让progress输入变量可观察，然后在钩子中订阅它ngAfterViewInit，但我不完全确定它是如何工作的。我还想我可以挂钩ngOnChanges并检查它是否是第一个更改（实际上 SimpleChange 类根据文档有这样的方法），但对我来说感觉有点骇人听闻。

将不胜感激任何指针！Angular 2 在我身上成长了，但它肯定需要很多时间来适应来自 Angular 1/ES5 的习惯。

4

1 回答 1

2

使用ngOnChanges. 这是适当的生命周期钩子，用于在输入属性值更改时收到通知。

至于等到视图初始化之后......我会ngAfterViewInit设置一个标志，ngOnChanges每次运行时都会检查：

export class ProgressCircle implements AfterViewInit {
   viewInitialized = false;
   ...
   ngOnChanges() {
      if(!viewInitialized)  return;
      ...
   }
   ngAfterViewInit() {
      viewInitialized = true;
      ...
   }

可能有一些方法ngOnChanges可以确定视图是否已初始化，但我不知道有任何方法（如果您知道一种方法，请发表评论，它比标志更有效）。

此外，@Injectable只需要在依赖于其他服务的服务上使用。

于 2016-09-23T23:08:19.060 回答