компонент не будет получать обновления от родительского angularjs

Question

Я пытаюсь получать обновления от родительского компонента (асинхронное обновление), однако, хотя исходный $ onInit получает данные от родителя, любые обновления не обновляют родительский компонент (возвращается как неопределенное)

Есть ли способ получать обновления?

Дочерний компонент:

import template from 'html-loader!./child.html'

export const childComponent = {
    template: template,
    require: {
        parentComponent: '^parentComponent'
    },
    controllerAs: 'vm',
    controller: class {

        constructor($scope) {
            this.option = null
            this.items = []
            this.$scope = $scope
        }

        static get $inject() {
            return ['$scope']
        }

        $onInit() {
            this.items = this.parentComponent.items
            // this.items doesn't get updated when this.parentComponent updates
        }
    }
}

ОБНОВЛЕНИЕ:

<div ng-app="app">

    <div ng-controller="AppController as vm">
        <parent-component items="vm.fruit">
            <div ng-if="vm.fruit.length < 1">Loading...</div>
            <child-component></child-component>
        </parent-component>
    </div>

</div>

Answer 1

Взгляните на эту демонстрацию

Причина, по которой $onInit() не позвонили, вам нужно добавить 2 вещи:

Добавить transclude: true в parentComponent декларацию

, а затем добавьте ng-transclude в html, как показано ниже:

<parent-component ng-transclude>

  <child-component></child-component>

</parent-component>

---