AngularJS ui-router 教程 undefined binding es2015

Question

我正在尝试构建 ui-router angular1 教程的 es2015、离线、捆绑（使用 webpack）版本，但我正忙于解决传递给组件的一些数据。尽管服务函数返回一个带有实际数据的已解决承诺，但它永远不会被注入到组件中。当我尝试制作一个控制器来检查它是否被传入时，如果我传入正在解析的属性的名称，我会收到错误

Error: [$injector:unpr] Unknown provider: peopleProvider <- people

这里有一些来源。如果您需要查看更多内容，我可以将您添加到 repo 中

app.js

import angular from 'angular';
import 'angular-animate';
import 'angular-aria';
import 'angular-ui-router';
import 'material-design-lite';

import 'material-design-lite/dist/material.css';
import './scss/main.scss';

import Layout from './components/layout/layout.component';
import PeopleService from './services/people.service';
import states from './config/app.states';

angular.module('app', [
  'ui.router',
  Layout.name
])
.config(states)
.service('peopleService', PeopleService);

简化的 app.states.js

export default function($locationProvider, $stateProvider, $urlRouterProvider) {  
  $stateProvider
  // other states
  .state('lists', {
    url: '/lists',
    template: '<lists></lists>',
    resolve: {
      people: ['peopleService', PeopleService => {
        console.log(PeopleService.getAllPeople();
        return PeopleService.getAllPeople();
      }]
    }
  });

  $urlRouterProvider.otherwise('/');
}

layout.component.js

import Lists from '../lists/lists.component';

export default angular.module('layout', [
  Lists.name
])
.component('layout', {
  templateUrl: './components/layout/layout.template.html'
});

list.component.js

export default angular.module('app.lists', [])
.component('lists', {
  templateUrl: './components/lists/lists.template.html',
  bindings: {
    people: '<' // from 'resolve' property of config/app.states
  },
  controller: class ListCtrl {
    constructor(people) {
      console.log(arguments);
      console.log(this);
    }
  }
});

PeopleService.getAllPeople() 正确返回。 people 属性出现在组件上，但它始终未定义，除非我使用上面的代码尝试将 people 作为参数传递，在这种情况下它会引发 $injector:unpr 错误。

感谢您的帮助

Answer 1

对不起，我之前的回答不正确。我认为要更接近解决方案，您至少需要在app.states.js 中将people 属性添加到template。赞这个<lists people="people"></lists>