K
K
Konstantin2020-01-15 01:43:03
Angular
Konstantin, 2020-01-15 01:43:03

How to wait for library initialization?

The question is how to make it so that all child components wait for the service to be initialized - which will return the map object.
The service is initialized in the parent component app.component and has a reference to the DOM element.
So, the rest of the components also use this service to get access to the map - but do not wait for it to be fully initialized.
Main Component:

import { Component } from "@angular/core";
import { ReonMapLibraryService } from "../../projects/reon-map-library/src/lib/reon-map-library.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  constructor(private ReonMapLibraryService: ReonMapLibraryService) {}

  ready() {
    return this.ReonMapLibraryService.ready();
  }
}

Component template:
<lib-reon-map-library></lib-reon-map-library>
 <app-menu></app-menu>

Where <lib-reon-map-library></lib-reon-map-library>is the child component where the service initialization takes place:
@Component({
  selector: "lib-reon-map-library",
  template: `
    <div id="map-container" #mapContainer></div>
  `,
  styles: []
})
export class ReonMapLibraryComponent implements AfterViewInit {
  @ViewChild("mapContainer", { static: true }) map: ElementRef;

  constructor(private ReonMapLibraryService: ReonMapLibraryService) {}

  ngAfterViewInit(): void {
    this.ReonMapLibraryService.initialization(this.map.nativeElement);
  }
}

The problem is that the child components
<app-menu></app-menu>
 <app-menu2></app-menu2>

do not wait for the service from the component to be ready<lib-reon-map-library></lib-reon-map-library>:
<lib-reon-map-library></lib-reon-map-library>
 <app-menu></app-menu>
 <app-menu2></app-menu2>

And then they fall because they also have a dependency on the service in the constructor:
constructor(private ReonMapLibraryService: ReonMapLibraryService) {}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Anton Shvets, 2020-01-15
@Junart1

If the service is not immediately ready to work, a ready $ stream should stick out of it. Which can be attached to ngIf on a component is not an example.
In general, it is not clear from the code why something falls.
The dependency should not lead to a crash, the injector looks for or creates its dependencies before creating an instance, and the problem is not in your component, but in the service.

L
Lev Zabudkin, 2020-01-15
@zabudkin

Somewhere the recursion has crept in?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question