Я хочу передать некоторые функции в моем шаблоне текущему активному родительскому компоненту:

<div ng-click="thisComponent.parentComponent.fn()"></div>

Родительский компонент зависит от просматриваемой страницы и конфигурации, поэтому я попробовал:

app.component('thisComponent', {
    controllerAs: 'thisComponent'
    require: {
        parentComponent : '?^componentOne' || '?^componentTwo'
    },
    controller: function() {
        this.$onInit = () => {
            // Returns null when the parent is componentTwo
            console.log(this.parentComponent);
        }
    }
});

Код не ломается, он действительно работает, когда componentOne является родителем, но когда это не так, this.parentComponent оценивается как null, не пытаясь componentTwo.


Обновление 2018-02-28

Получил, что он работает с ответом @Korte (см. Ниже), но все еще задается вопросом, почему приведенный выше код не работает. Почему он не оценивает следующий вариант, когда первый возвращает null? Кто-нибудь хочет объяснить?

0
Jeffrey Roosendaal 27 Фев 2018 в 13:17

1 ответ

Лучший ответ

Вам могут потребоваться оба родительских компонента, а затем проверить, какой из них определен.

Например

app.component('thisComponent', {
    controllerAs: 'thisComponent',
    require: {
        firstParent : '?^componentOne',
        secondParent: '?^componentTwo'
    },
    controller: function() {
        this.$onInit = () => {
            this.parentComponent = this.firstParent || this.secondParent;
            console.log(this.parentComponent);
        }
    }
});

Вот рабочая скрипка.

1
korteee 27 Фев 2018 в 13:38