Angular 1.5 - UI-Router，解析返回未定义值的对象 [英] Angular 1.5 - UI-Router, Resolve Object returning undefined values

问题描述

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

I am unable to get resolved data (via resolve object) from ui router pre-loaded into a component controller. the properties are showing up in the component's this object, but all properties are undefined. Why is this happening? I have been stuck on this for a while now...

这里是组件:

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

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

this.settings and this.labels appear, but they are undefined. when I console.log inside resolve.settings below, I can see the promise itself. in the promise below, value contains the return data I want:

以下是我使用 UI 路由器处理的状态:

below is the state I am working on with UI router:

{
      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');
          });
        }
      }
    }

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

here is the fetch function from the service that's being called in the route:

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 路由器 1.0.0-beta.1

UPDATE: using ui router 1.0.0-beta.1

推荐答案

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

As long as you are not using the 1.0.0 (currently beta) version of the ui-router there is no way to directly use the components. For the beta version, please see this discussion: https://github.com/angular-ui/ui-router/issues/2627. There is also a tutorial on how to use routing to components with resolves: https://ui-router.github.io/tutorial/ng1/hellogalaxy

您在这里所做的是创建一个名为 loans 的状态，其中包含一个隐式控制器和范围，它将分配解析的数据.然后在模板中实例化您的组件，而无需传递任何所需的属性.

What you are doing here is creating a state named loans with an implicit controller and scope which will have the resolved data assigned. In the template you then instantiate your component without passing any of the attributes required.

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

So if you want to use your component with the 0.2.x ui-router, you need to add some dummy controller which gets the resolved properties injected and then pass the values of the dummy controller into the component via the template like

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

根据您的 ui-router 版本有多新(0.3.x?)，您可能可以使用新引入的 $resolve 属性来避免创建像这样的虚拟控制器:

Depending on how new your version of the ui-router is (0.3.x?), you can probably use the newly introduced $resolve property to avoid creating a dummy controller like this:

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

详情请见:https://github.com/angular-ui/ui-router/issues/2793#issuecomment-223764105

这篇关于Angular 1.5 - UI-Router，解析返回未定义值的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！