एक प्रकार का वृक्ष त्रुटि: लागू जीवन चक्र हुक इंटरफेस

Question

सभी को नमस्कार मैं एक linting त्रुटि मिली और मुझे यकीन है कि क्या यह इस बारे में बात कर रही है नहीं कर रहा हूँ त्रुटि है: src/app/particles/particles.component.ts[4, 1]: Implement lifecycle hook interfaces (https://angular.io/docs/ts/latest/guide/style-guide.html#!#09-01) पंक्ति एन.आर. 4 @Component({ लाइन

मैंने पढ़ा है यह लिंक देता है और मुझे वह बताता है जो मुझे बताता है (कम से कम मुझे ऐसा लगता है :)) लेकिन मैं नहीं देख सकता कि यह इस मामले में कैसे लागू होता है।

किसी भी सहायता के लिए धन्यवाद।

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

आप ngAfterViewInit जीवनचक्र हुक का उपयोग कर रहे हैं, तो आप बस नीचे जोड़ने के लिए TSLint खुश करने के लिए, की जरूरत है

export class ParticlesComponent implements AfterViewInit 

आशा इस मदद करता है !!