Lint hatası: Uygulama yaşam döngüsü kanca arayüzleri

Question

Hey herkes bir tüylenme hata var ve ben, bu bahsettiğini emin değilim hatadır: src/app/particles/particles.component.ts[4, 1]: Implement lifecycle hook interfaces (https://angular.io/docs/ts/latest/guide/style-guide.html#!#09-01) Sıra nr 4 okudum @Component({ hat

olduğunu Bağla, bana anlatmaya çalıştığı şeyi anladım (en azından öyle düşünüyorum :)) ama bu durumda nasıl uygulanacağını göremiyorum.

Yardımlarınız için teşekkür ederiz. Eğer ngAfterViewInit Ömrü Kanca kullanan

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

, sadece, TSLint mutlu etmek için aşağıdaki eklemek için bu yardımcı olur

export class ParticlesComponent implements AfterViewInit 

Umut ihtiyaç !!