Issue
I have a component which has event listeners set for mousedown, up, and move. For some reason when these events are triggered, and only when they are triggered the child component (which is not event a child of the html that has these event bindings) rerenders. This is an angular application. I want to make sure the weekrow component wont be rerendered (according to logging the hostbinding is called twice each time) when these are triggered as the next implemented feature heavily relies on these events.
I should mention as it might be relevant, dates are heavily used in the display logic (including current date), maybe thats why angular decides it must be rerendered
Edit: Actually each child is rerendered, how do i prevent that.
export class WeekRowComponent {
@Input() events: CalendarEvent[] = [];
rows: number = 0;
@HostBinding('style.height.px')
get containerHeight(): number {
const height = this.rows * 48 / 2;
console.log("I'm the problem")
return height;
}
getPositionedEvents(events: CalendarEvent[]) {
const laidOutEvents = this.layoutEvents(events);
this.rows = laidOutEvents.length;
const positionedEvents = this.unpackColumns(laidOutEvents);
return positionedEvents
}
private layoutEvents(events: CalendarEvent[]): CalendarGridCell[][] {...}
private unpackColumns(columns: CalendarGridCell[][]): CalendarGridCell[] {...}
private getDaySpan(ev: CalendarEvent) {...}
private getStartIndex(ev: CalendarEvent) {...}
private sortEvents(events: CalendarEvent[]): CalendarEvent[] {...}
}
<app-week-row [events]="getFullDayEvents(this.events)"></app-week-row>
<div id="main-canvas" (mousedown)="mouseDownHandler($event)" (mouseup)="mouseUpHandler($event)"
(mousemove)="mouseDownHandler($event)">
</div>
Solution
Turns out the issue is Angular considers functions that are part of the component class impure functions which forces them to re-run on each change detection cycle.
The solution was to move the logic into pipes, the result of which is cached as they are considered pure unless specified otherwise.
Answered By - Blye
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.