angular - hooks - Error de pelusa: implementar interfaces de gancho de ciclo de vida

ciclo de vida de un componente angular

Question

Hola a todos, tengo un error de alineación y no estoy seguro de a qué se refiere, este es el error: src/app/particles/particles.component.ts[4, 1]: Implement lifecycle hook interfaces (https://angular.io/docs/ts/latest/guide/style-guide.html#!#09-01) fila n ° 4 es @Component({ line

He leído el enlace que da y recibo lo que intenta decirme (al menos creo que sí :)) pero no puedo ver cómo se aplica en este caso.

Gracias por cualquier ayuda.

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;
  }
}

Answer 1

está utilizando ngAfterViewInit Lifecycle Hook, solo necesita agregar a continuación para hacer feliz a TSLint,

export class ParticlesComponent implements AfterViewInit

¡¡Espero que esto ayude!!