Angular 1.5 - UI-Router，Resolve Object返回未定义的值

Question

我无法从预先加载到组件控制器的ui路由器获取解析数据（通过解析对象）。属性显示在组件的this对象中，但所有属性都未定义。为什么会这样？我已经坚持了一段时间了......

这是组件：

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

this.settings和this.labels出现，但它们未定义。当我在下面的resolve.settings中的console.log时，我可以看到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的状态，其中包含一个隐式控制器和范围，它将分配已解析的数据。然后在模板中实例化组件，而不传递任何所需的属性。

因此，如果您想将组件与0.2.x ui-router一起使用，则需要添加一些虚拟控制器来获取注入的已解析属性，然后通过模板将虚拟控制器的值传递给组件，如< / p>

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

根据您的ui-router版本（0.3.x？）的新版本，您可以使用新引入的$resolve属性来避免创建这样的虚拟控制器：

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

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

Answer 2

我对Angular 1.6有类似的问题，看起来这个版本的行为不同。在我的解决之后，我的视图被呈现，但是我认为之前调用了控制器。它适用于使用$ onInit，如angular docs建议：

.component('myComponent', {
  bindings: {value: '<'},
  controller: function() {
    this.$onInit = function() {
      // do somthing with this.value
    };
  }
})

https://github.com/angular/angular.js/issues/15545