javascript - Angular 1.5 - UI 路由器，解析对象返回未定义的值

Question

我无法从预加载到组件 Controller 中的 ui 路由器获取解析数据(通过解析对象)。这些属性显示在组件的 this 对象中，但所有属性均未定义。为什么会发生这种情况？我已经被这个问题困扰了一段时间了......

这是组件:

  .component('wLoans', {
    template: require('./loans.html'),
    controller: LoansController,
    bindings: {
      settings: '<',
      labels: '<'
    }
  });

出现了 this.settings 和 this.labels，但它们是未定义的。当我在下面的resolve.settings中console.log时，我可以看到 promise 本身。在下面的 promise 中，value包含我想要的返回数据:

下面是我正在使用 UI 路由器处理的状态:

{
      name: 'loans',
      parent: 'app',
      url: '/loans',
      data: {
        authRequired: true
      },
      views: {
        content: {
          template: '<w-loans></w-loans>'
        }
      },
      resolve: {
        labels(LabelService) {
          'ngInject';
          return LabelService.fetch();
        },
        settings(SettingsService) {
          'ngInject';
          console.log(SettingsService.fetch());
          return SettingsService.fetch()
        },
        module($q, $ocLazyLoad, LabelService) {
          'ngInject';
          return $q((resolve) => {
            require.ensure([], (require) => {
              let mod = require('pages/loans');
              $ocLazyLoad.load({ name: mod.name });
              resolve(mod.name, LabelService.fetch());
            }, 'loans');
          });
        }
      }
    }

这是从路由中调用的服务获取函数:

function fetch() {
        // return $http.get(require('!!file!mocks/settings.json'), {
    return $http.get(`${DEV_API_URL}/settings`, {
      cache: settingsCache,
      transformResponse: [
        ...$http.defaults.transformResponse,
        transformResponse
      ]
    })
      .then(({ data }) => {
        angular.extend(model, data);
        settingsCache.put('store', model);
        return model;
      });
  }

感谢任何帮助!

更新:使用 ui router 1.0.0-beta.1

Answer 1

只要您不使用 ui-router 的 1.0.0(当前测试版)版本，就无法直接使用这些组件。对于测试版，请参阅此讨论:https://github.com/angular-ui/ui-router/issues/2627 。还有一个关于如何使用路由到具有解析的组件的教程:https://ui-router.github.io/tutorial/ng1/hellogalaxy

您在这里所做的是创建一个名为 loans 的状态，其中包含隐式 Controller 和作用域，该 Controller 和作用域将分配已解析的数据。然后，您可以在模板中实例化组件，而无需传递任何所需的属性。

因此，如果您想将组件与 0.2.x ui-router 一起使用，则需要添加一些虚拟 Controller ，该 Controller 会注入(inject)已解析的属性，然后通过模板将虚拟 Controller 的值传递到组件中，例如

<w-loans settings="settings" .../>

根据您的 ui-router 版本有多新(0.3.x？)，您可能可以使用新引入的 $resolve 属性来避免创建如下所示的虚拟 Controller :

<w-loans settings="$resolve.settings" ...></w-loans>

详细信息请参见:https://github.com/angular-ui/ui-router/issues/2793#issuecomment-223764105