36 lines
862 B
TypeScript
36 lines
862 B
TypeScript
|
// #docregion
|
||
|
|
import {Component, Input, Output} from 'angular2/core';
|
||
|
|
|
||
|
|
let nextId = 1;
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'heavy-loader',
|
||
|
|
template: '<span>heavy loader #{{id}} on duty!</span>'
|
||
|
|
})
|
||
|
|
export class HeavyLoaderComponent {
|
||
|
|
id = nextId++;
|
||
|
|
@Input() logs: string[];
|
||
|
|
|
||
|
|
ngOnInit() {
|
||
|
|
// Mock todo: get 10,000 rows of data from the server
|
||
|
|
this._log(`heavy-loader ${this.id} initialized,
|
||
|
|
loading 10,000 rows of data from the server`);
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnDestroy() {
|
||
|
|
// Mock todo: clean-up
|
||
|
|
this._log(`heavy-loader ${this.id} destroyed, cleaning up`);
|
||
|
|
}
|
||
|
|
|
||
|
|
private _log(msg: string) {
|
||
|
|
this.logs.push(msg);
|
||
|
|
this._tick();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Triggers the next round of Angular change detection
|
||
|
|
// after one turn of the JavaScript cycle
|
||
|
|
// ensuring display of msg added in onDestroy
|
||
|
|
private _tick() { setTimeout(() => { }, 0); }
|
||
|
|
}
|
||
|
|
// #enddocregion
|