Question

我们不是将AngularJs用作SPA，而是使用嵌入式模块来管理某些行为和共享数据，因此我们实际上并没有利用诸如angular router之类的东西。仅在共享数据服务完成异步请求后，才应如何初始化组件？ AngularJS与Typescript一起使用

角度模块

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页面托管Angular模块

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进行试用

我已经看到很多人通过appModule.config（）为$ routeProvider提供建议，但是它不起作用。考虑到我们使用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（）的'path'是URL的一部分。你能验证这是真的吗？

在其他解决方案中，我能想到的最直观的事情是在数据服务获取数据后广播事件，而组件侦听事件以获取数据，而不是在初始化期间进行获取。

我很高兴有人可以建议$ routeProvider在我的用例中可以使用，还是建议任何其他可能的解决方案来实现这一目标。

AngularJS：服务完成异步请求后如何初始化组件

DataService.ts

0 个答案: