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!!