将数据从父组件传递给子 angular.js 组件 [重复]答案

【问题标题】：Pass data from parent to child angular.js components [duplicate]将数据从父组件传递给子 angular.js 组件 [重复]
【发布时间】：2019-01-29 03:36:00
【问题描述】：

我有父组件：

(function () {
  angular.module('app.module')
    .component('parentComponent', {
      templateUrl: 'parent.html',
      controllerAs: 'vm',
      controller: function ($scope) {
      this.$onInit = () => {
        $scope.parentData = 'test'
      }
  })
})()

子组件

(function () {
  angular.module('app.module').component('childComponent', {
  templateUrl: 'child.html',
  controllerAs: 'vm',
  controller: function () {
  this.$onInit = () => {
  }
 }
})
})()

父.html

<child-component></child-component>

child.html

<p>{{parentData}}</p>

所以我想在我的子组件中访问 parentData 以在我的子组件中显示字符串“test”。我该怎么做？我读了一些关于绑定的东西，但我不知道如何在这个例子中使用它。

感谢您的任何建议。

【问题讨论】：

标签： angularjs data-binding

【解决方案1】：

您可以通过父控制器访问父控制器的数据，为此您可以在组件声明中使用require：

这是一个例子：

app.component('childComponent', {
  require: {
    parentCtrl: '^parentComponent'
  },
  controller: function() {
    var self = this;
    this.$onInit = function() {
      self.parentCtrl.anyData;
    };
  }
});

看看codelord.net - Advanced Angular 1.x: Component Communication with Require

如果不需要父控制器可以绑定数据到子组件：参考@georgeawg答案

【讨论】：

如果您不赞成投票，请留言，这样我至少现在可以知道为什么我的回答不好。如果是因为他要求将数据从父母传递给孩子，而我的回答是通过控制器，我认为不应该投票。有时它有助于传递控制器而不仅仅是数据
require 技术不应用于替换任何类型的简单绑定。使用绑定在组件之间传递一些值是完全没问题的——它可以更明确且更易于维护。毕竟，如果您需要做的只是查看其绑定，通常更容易理解组件所依赖的内容。
首先，require 并不适用于所有场景。它只能由组件/指令用于访问父控制器（或同一元素上的控制器）。兄弟组件无法使用它进行通信，父组件也不能使用它访问其子组件（至少不能直接访问，请继续阅读以寻找有趣的选项）。
require 的另一个限制是它假定子组件知道它想要请求的另一个组件的名称。这里没有抽象/间接——所需组件的名称是硬编码在所需组件中的。
无论如何，我认为否决我的答案是不公平的。也许这不是最佳实践，将数据绑定到孩子可能会更好。但是如果 require 属性存在并且 angular 使得它成为可能，那么这样做也不错。

【解决方案2】：

使用单向<绑定：

<child-component in-data="$ctrl.parentData"></child-component>

子组件：

app.component("childComponent", {
    bindings: {
        inData: '<',
    },
    template: `
        <div>{{$ctrl.inData}}</div>
    `,
})

演示

angular.module("app",[])
.component("parentComponent", {
    template: `
        <fieldset>
            Inside parent component<br>
            parentData={{$ctrl.parentData}}
            <child-component in-data="$ctrl.parentData"></child-component>
        </fieldset>
    `,
    controller: function () {
        this.$onInit = () => {
            this.parentData = 'test'
        };
    },
})
.component("childComponent",{
    bindings: {
        inData: '<',
    },
    template: `
        <fieldset>Inside child component<br>
            inData={{$ctrl.inData}}
        </fieldset>
    `,
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <parent-component>
    </parent-component>
<body>

有关详细信息，请参阅

【讨论】：

太好了，可以了！