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

Question

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

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

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

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>

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

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

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

Answer 1

通过查看 component documentation components bindings (vm.type in your case) are available after $onInit was called by the component - You are fine but you are a bit to early =). Please check this 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: '='
  }
})

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

AngularJS binding property to object in component

javascript

angularjs

angular-components

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

AngularJS binding property to object in component

javascript

angularjs

angular-components

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