Issue
I got a linting error and I am not sure what it is talking about, this is the 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)
Row nr 4 is the @Component({
line
I have read the link it gives and I get what it tries to tell me, but I can't see how it applies in this case.
import { Component, ViewChild, ElementRef, HostListener} from '@angular/core';
import { Particle } from './particle';
@Component({
selector: 'km-particles',
template: ` <canvas #canvas
[attr.width]='width'
[attr.height]='height'
[style.opacity]='opacity'>
</canvas>`
})
export class ParticlesComponent {
...
// 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();
}
...
}
Solution
you are using ngAfterViewInit
Lifecycle Hook, you just need to add below to make TSLint happy,
export class ParticlesComponent implements AfterViewInit
Hope this helps!!
Answered By - Madhu Ranjan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.