web-dev-qa-db-fra.com

Erreur de peluche: implémenter des interfaces de hook de cycle de vie

Salut tout le monde, j'ai une erreur de peluches et je ne suis pas sûr de ce dont il parle, c'est l'erreur: src/app/particles/particles.component.ts[4, 1]: Implement lifecycle hook interfaces (https://angular.io/docs/ts/latest/guide/style-guide.html#!#09-01) La rangée 4 est la @Component({ ligne

J'ai lu le lien que cela donne et j'obtiens ce qu'il essaie de me dire (du moins, je pense bien :)), mais je ne vois pas comment cela s'applique dans ce cas.

Merci pour toute aide.

import { Component, ViewChild, ElementRef, HostListener} from '@angular/core';
import { Particle } from './particle';

@Component({
  selector: 'km-particles',
  styles: ['canvas { transition: opacity 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);}'],
  template: ` <canvas #canvas
              [attr.width]='width'
              [attr.height]='height'
              [style.opacity]='opacity'>
              </canvas>`
})
export class ParticlesComponent {

  private ctx: CanvasRenderingContext2D;
  private width: number;
  private height: number;
  private opacity: number;
  private particles: Particle[];
  private particleClearLoop: any;

  public playParticles: boolean;

  // get the element with the #canvas on it
  @ViewChild('canvas') canvas: ElementRef;

  // on window resize, restart the animation with the new boundaries
  @HostListener('window:resize', ['$event'])
  OnResize(event: Event) {
    this.initAnim();
  }

  constructor() {
    this.opacity = 0;
  }

  // wait for the view to init before using the element
  ngAfterViewInit() {
    this.ctx = this.canvas.nativeElement.getContext('2d');

    // ok all is ready, start the particle animation
    this.initAnim();
  }

  createParticles() {
    this.particles = [];
    // let's make us some particles
    for (let i = 0; i < 150; i++) {
      this.particles.Push(new Particle());
    }
  }

  draw() {
    // clear canvas
    this.ctx.clearRect(0, 0, this.width, this.height);

    // draw the particles
    this.particles.forEach((particle) => {

      particle.timestamp = Math.floor(Date.now());
      particle.counter = particle.sign * (particle.timestamp / particle.speed * Math.PI);

      this.ctx.beginPath();
      // define the circleparticle
      this.ctx.arc( particle.xPos + particle.radius * Math.cos(particle.counter / 100),
                    particle.yPos + particle.radius * Math.sin(particle.counter / 100),
                    particle.width,
                    0,
                    Math.PI * 2,
                    false);

      this.ctx.globalAlpha = particle.alpha;
      this.ctx.fillStyle = particle.color;
      this.ctx.fill();

    });

    if (this.playParticles) {
      requestAnimationFrame(this.draw.bind(this)); // AGAIN!
    }

  }

  // init resize and make the particles
  initAnim() {
    this.playParticles = false;
    this.opacity = 0; // so we don't see the flicker

    clearInterval(this.particleClearLoop);

    this.particleClearLoop = setTimeout(() => {
      this.opacity = 1;
      this.playParticles = true;
      this.resize();
      this.createParticles();
      this.draw();
    }, 500);
  }

  // method that resizes the canvas to the full width/height of the window
  resize() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
  }
}
angularnpmlint
37
Björn Hjorth

vous utilisez ngAfterViewInit Lifecycle Hook, il vous suffit d’ajouter ce qui suit pour rendre TSLint heureux,

export class ParticlesComponent implements AfterViewInit

J'espère que cela t'aides!!

92
Madhu Ranjan