AngularJS 将属性绑定到组件中的对象答案

【问题标题】：AngularJS binding property to object in componentAngularJS 将属性绑定到组件中的对象
【发布时间】：2017-08-19 12:25:29
【问题描述】：

我有一个带有以下控制器的应用程序：

var app = angular.module('someApp', []);
app.controller('mainCtrl', function($scope, $timeout) {
    $timeout(function() {
        $scope.myObject = {
            type: 'blaat'
        }
    }, 5000);
});

它有一个超时，在 5 秒后在 mainCtrl 上创建一个具有 type 属性的对象。我还定义了一个采用类型属性的组件：

app.component('createSome', {
    templateUrl: 'create.html',
    controller: 'createController as create',
    bindings: {
        type: '='
    }
});

当该对象上的类型可用并将该类型传递给该组件时，该组件被渲染：

<body ng-controller="mainCtrl">
    mainCtrl object: {{ myObject.type }}

    <create-some 
      ng-if="myObject.type"
      type="myObject.type">
    </create-some>
</body>

该组件的控制器在初始化时正在创建一个具有该类型的新对象。这就是事情出错的地方。该对象永远不会获得 type 属性。当 createController 被初始化时，我还添加了一个额外的 console.log 并且在那里也看不到 type 属性。但是，该类型已正确打印在控制器上的组件内。

app.controller('createController', function($scope) {
    var vm = this;

    console.log('creating create controller', vm.type);

    vm.newObject = {
        type: vm.type
    };
});

我猜这是某种时间问题；在控制器范围内设置组件属性之前，控制器正在初始化。我的问题是：我必须改变什么才能让组件控制器中的对象按需要工作。我唯一能想到但宁愿避免的事情就是使用手表。

我还创建了以下包含上述所有内容的 plunk：
https://plnkr.co/edit/XIfm1y6GBT2WcFKBvlPY

我问这个是因为我正在处理的应用程序中遇到类似的情况。奇怪的是，这似乎在所有环境的生产中都能正常工作。在本地运行代码时（使用带有browserify的gulp）它在Windows计算机上失败，但在我的macbook上却没有。哪种让我大吃一惊。它之前在 Windows 计算机上工作，并且在这之间没有发生任何代码更改。如果有人对此有解释会更好，但我已经对正确的处理方法感到高兴。 :-) 除了 plunk 在我测试它的任何机器上的行为都相同，所以它可能是项目其余部分特有的东西。

【问题讨论】：

标签： javascript angularjs angular-components

【解决方案1】：

通过查看component documentation 组件绑定（在您的情况下为vm.type）在组件调用$onInit 后可用-您很好，但您有点早=）。请检查此running plnkr。我不知道为什么它在某些环境中对你有用，但是通过阅读文档它不应该工作。也许您很幸运，因为您的其他硬件要快得多，并且vm.type在组件被实例化的那一刻就被解析了。

var app = angular.module('someApp', []);

app.controller('mainCtrl', function($scope, $timeout) {
  $timeout(function() {
    $scope.myObject = {
      type: 'blaat'
    }
  }, 5000);
});

app.controller('createController', function($scope) {
  var vm = this;

  vm.newObject = {
    type: vm.type  
  }; 

  this.$onInit = function () {
    console.log('creating create controller', vm.type);
  };
});

app.component('createSome', {
  templateUrl: 'create.html',
  controller: 'createController as create',
  bindings: {
      type: '='
  }
})

【讨论】：

Wauw, "$onInit() - 在元素上的所有控制器都已构建并初始化其绑定之后（以及在此元素上的指令的前后链接函数之前）在每个控制器上调用)。这是放置控制器的初始化代码的好地方。”应该按铃吧？！非常感谢！
@StefK 是的，这就是你应该这样做的方式 =) $onInit FTW。
我真的不知道 $onInit 甚至存在。这是我第一次使用组件的冒险。很奇怪，它在大多数情况下都在我的应用程序中工作，因为它看起来确实不应该有，除非非常幸运。
@StefK 很高兴为您提供帮助。推了你一点。 ;-)