将数据从父组件传递到子 angular.js 组件

Question

我有父组件：

(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>

孩子.html

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

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

感谢您的任何建议。

Answer 1

使用单向<绑定：

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

子组件：

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

演示版

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

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

有关更多信息，请参阅

• AngularJS 开发人员指南 - 基于组件的应用程序架构
• AngularJS 综合 API 参考 - 范围