Question

我正在尝试创建一个可以在应用程序中重用的可重用组件。我们正在使用Angular 1.5.8

有些数据需要从父组件传递到子组件。（通常是保存信息的对象）。它可以是

经过一些阅读后，我发现有一个名为require的属性，你可以提到父组件的名称，然后可以访问父控制器的方法。

主要缺点是父组件名称是硬编码的。这限制了组件的可重用性。

无论如何，我们可以动态地将数据从父组件传递给子组件。

代码示例

app.component('parent',
{ restrict: 'E', 
  scope: {}, 
  templateUrl: 'app/parent.html', 
  controller: function(){
    var vm = this;
     vm.sayHello = function (){
           return {
                  parentName : 'parent1',
                  parentCode : 'parentCode1'
             };
       };
   }, 
  controllerAs: 'vm'}); 

 app.component('child', {
   require: {
parentCtrl: '^^parent'
  },
controller: function() {
var self = this;
this.$onInit = function() {
  self.parentCtrl.sayHello();
};
}
 });

谢谢

Answer 1

在定义对象中添加绑定到子组件：

app.component('child',{ 
  bindings:{
    data: '<'
  }, 
  templateUrl: 'app/child.html', 
  controller: childController});

然后在parent.html中使用以下内容：

Plunkr：https://plnkr.co/edit/d6wS1dHVsYT3fNkMUVNY?p=preview

angular.noop只是一个空函数，因此如果您没有任何组件控制器，则可以放置如果未指定controllerAs别名

，则$ ctrl是默认值

此外，您可以在子组件$ onInit（）$ onChanges（）和$ onDestroy（）生命周期挂钩上使用它来控制组件在某些点上将执行的操作。

如果你使用.component drop限制：'E'已经是一个元素

在Angularjs 1.5.x中创建可重用的组件，可以访问父控制器字段

1 个答案: