Angular - delay between constructor and ngOnInit method of 10-12 seconds

Question

I have encountered strange issue which is related to the component creation and passing data into it.

For staters, I am using:

Angular CLI: 1.6.4
Angular: 5.1.0

Issue is as follows: in parent component I am fetching data, creating DataService object, passing data to service and then navigating to the child component. I have noticed that headers of the child component show immidiately when data (shown by *ngFor) 10-12 seconds later.

Parent component code snipped responsible for navigation (till this point everything seems to be ok):

navigateTo({ id, data }) {
    let component = '/d/';
    id = Utils.decodeString(id);

    this._data.changeMessage(data);
    this._router.navigate([component, id]);
}

getAllDataByProvince = async (provinceName) => {

    provinceName = Object.keys(ProvinceNames).filter(function (key) { return ProvinceNames[key] === provinceName })[0];

    let sensors = await this._polution.getAllDataBy<Province>(provinceName, new Province())
      .then(sensors => {
        this.navigateTo({ id: provinceName, data: sensors })
      })
      .catch(error => { throw Error(error) });
}

Child component:

export class DetailedViewPageComponent implements OnInit, AfterViewInit {
    data: string;

    constructor(private dataService: DataService) {
        console.log('timestamp - constructor', new Date().getTime());
    }

    ngOnInit() {
        this.dataService.currentMessage.subscribe(message => {
            console.log('timestamp - ngOnInit', new Date().getTime());
            console.log(message);
            this.data = message;
            console.log(this.data);
        });
    }

    ngAfterViewInit(): void {
        console.log('timestamp - ngAfterViewInit', new Date().getTime());
    }
}

Child component's HTML:

<h1>Details view</h1>
<input type="text" name="search" id="searchInputArea">
<ul>
    <li *ngFor="let item of data">
        <h3>
            {{item.name}}
        </h3>
        <p>{{ item.city.name }}</p>
        <ul>
            <li *ngFor="let sensor of item.sensors">{{ sensor.sensorId }}</li>
        </ul>
    </li>
</ul>

and DataService:

@Injectable()
export class DataService implements OnInit {
    private messageSource = new BehaviorSubject<string>("default message");
    currentMessage = this.messageSource.asObservable();

    constructor(private _router: Router) { }

    ngOnInit() { }

    changeMessage(message: any) {
        this.messageSource.next(message)
    }
}

Angular - delay between constructor and ngOnInit method of 10-12 seconds

0 Answers0