Question

我有一个带有控制器类的组件，它使用绑定对象作为输入参数。构造函数运行后，我可以访问控制器中的param。但我不能将它作为构造函数参数传递。

制作plunker我使用$ onInit方法找到了一个可行的解决方案。 (ui-router doc)。

但这是正确的方法吗？希望这对某人有帮助，请告诉我是否可以改进。

这是控制器：

class Controller {
  constructor(){
    'ngInject';
    this.$onInit = function(){      // Comment this
       this.problemScopeHere = angular.copy(this.param);  
    }                               // Comment this
    console.log(this.param);            
  }
  get(){
    this.problemScopeHere = this.param;
  }
}

这里是组件

 let Component = {
   bindings : {
      param : "="
   },
   controller : Controller,
   controllerAs: '$ctrl',
   templateUrl: 'component.html'
};

let app = angular.module('app', ['ui.router']);
app.component('comp', Component);

Answer 1

您应该将param作为属性添加到控制器类中。

Answer 2

我认为您应该使用resolve，因为您在UI路由器上的版本可以使用routing to component：

.state('app.home' ,{
      url: '/home',
      component: 'comp',
      bindigns: {
        param: 'param',
      },
      resolve: {
        param: function () {
          return {
            string: 'I am the object param'
          }
        }
      }
    });

工作小提琴（与你的有点不同，因为我不知道home.html是真的需要，我认为它仅用于演示目的）：https://plnkr.co/edit/jaXQN7YmmkI8AC1DxohI?p=preview。而且，您不能在Angular 1.6的第一个$onChanges（首次运行在$onInit之前）或$onInit运行之前使用绑定，因此建议使用不要在contructor中依赖它们 - 你可以在$onInit中依赖它们，我认为解决方法是最现代的方式 - 我过去常常像你一样传递参数{{1}但是，从UI Router 1.x来看，它更容易。您可以将template声明为常规类方法。而且，您不必使用$onInit。 controllerAs: $ctrl用作默认值，如果您不提供 - 我建议您始终使用默认值，以保证所有组件的一致性。

使用控制器类解析绑定

2 个答案: