AngularJS: Как инициализировать компоненты после того, как сервис завершил асинхронный запрос

Question

Мы не используем AngularJs в качестве SPA, а встроенный модуль для управления некоторым поведением и общими данными, поэтому на самом деле мы не используем что-то вроде углового маршрутизатора.Как я должен инициализировать компоненты только после того, как служба общих данных завершила асинхронный запрос?AngularJS использовался с Typescript

Angular Module

import ... from '...'
import ... from '...'
...

angular.module('app-1', [])
.service('data-service', DataService)
.component('zeroDateButton', new ZeroDateButtonComponent())
.component('zeroPanel', new ZeroPanelComponent())
.component('zeroChart', new ZeroChartComponent())

ASP.NET Page хостинг Угловой модуль

BI.aspx

<asp:Content ID="standardContent" ContentPlaceHolderID="MainContent" runat="server">
...
<zero-date-button></zero-date-button>
<zero-date-button></zero-date-button>

<zero-panel name="panel-1"></zero-panel>
<zero-panel name="panel-2"></zero-panel>
<zero-panel name="panel-3"></zero-panel>

<zero-chart></zero-chart>
...

<script src="Scripts/Components/component.app-1.js) "></script> //compiled angular module js file

</asp:Content>

URL страницы: https://www.example.com/BI/Zero

DataService.ts

public tryGetData() {
    return $http.get(url).then((res: any) => {
        this.panels = res.panels;
    });
}

ZeroPanelComponent.ts

...
public $onInit(): void {
    this.panels = this.dataService.panels;
    this._render();
...

Большая часть логики для этого модуля основана на данных трех компонентов, поэтому я хочу получить и сохранить их все вместе в службе данных, из которой каждый компонент получает доступ к нужным им данным.из этого сервиса, и пусть сервис выяснит логику и расскажет каждому из них, передавая события.

После инициализации компонентов (в методе $ onInit ) он должен отображать вещи, используяданные, полученные из службы данных.Проблема заключается в том, что инициализация компонента не ожидает, что служба данных завершит выборку данных, поэтому компонент не может получить необходимые данные и ничего не отображать.

Пробная версия с $ routeProvider

Я видел, как многие люди советовали $ routeProvider с appModule.config (), но это не сработало.Я не уверен, что это решение будет работать, учитывая то, как мы используем Angular, но я все еще публикую фрагмент кода.

angular.module('app-1', ['ngRoute'])
.config(($routeProvider) => {
    $routeProvider
        .when('/BI/Zero', {
            template: '<zero-panel class="flex-basis-half marginBottom" panel-name="SalesSnapshot", container-id="sales-snapshot"></zero-panel>',
            resolve: {
                DataService: (DataService) => {
                    return DataService.tryGetData();
                },
            },
        });
})
.service('zero-data-service', DataService)
...

, и я добавил директиву ng-view к одной в BI.aspx

Нет ошибки в браузере, <zero-panel> не отображается и tryGetDate () тоже не вызывается.Я обнаружил, что кто-то сказал, что путь, определенный для when (), является частью URL после символа #.Не могли бы вы проверить, правда ли это?

С точки зрения другого решения, наиболее интуитивно понятная вещь, о которой я могу подумать, - это передача события, когда служба данных получила данные, а компоненты вместо этого прослушивают событие для извлечения данных.извлечения во время их инициализации.

Буду признателен, если кто-нибудь подскажет, будет ли $ routeProvider работать в моем сценарии использования, или предложит любое другое возможное решение для достижения цели.