Angularjs 如何将异步数据从父组件传递到子组件？

我有一个父组件

angular.module('app')
  .component('parentComponent', {
    template: `
          <child-component data="myData"></child-component>
    `,

然后我将它传递给我的子组件，在那里我想要修改它并在模板中显示它

angular.module('app')
.component('childComponent', {
    restrict: 'E',
    replace: true,
    templateUrl: '',
    bindings: {
        data: '='
    },

    controller: function () {
    const $ctrl = this;

    $ctrl.$onInit = function () {
        console.log($ctrl.data);
    }
});

问题是数据在接收之前就被传入了，并且由于它在子组件中没有定义

---

我不知道如何在传递数据之前等待它。

使用

$onChanges

app.component（'childComponent'{
templateUrl:“”，
绑定：{
数据：'

angular.module('app')
.component('childComponent', {
    restrict: 'E',
    replace: true,
    templateUrl: '',
    bindings: {
        data: '='
    },

    controller: function () {
    const $ctrl = this;

    $ctrl.$onInit = function () {
        console.log($ctrl.data);
    }
});

app.component('childComponent', {
    templateUrl: '',
    bindings: {
        data: '<'
    },    
    controller: function () {
        const $ctrl = this;        
        $ctrl.$onChanges = function (changes) {
            changes.data && console.log(changes.data.currentValue);
        };
    }
});