AngularJS 组件要求：componentOne 或 componentTwo

Question

我想将模板中的一些函数传递给当前活动的父组件：

<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 的回答（见下文），但仍然想知道为什么上面的代码不起作用。为什么它在第一个 returns null 时不评估下一个选项？有人愿意解释吗？

Answer 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);
        }
    }
});

Here's a working fiddle.

AngularJS 组件要求：componentOne 或 componentTwo

AngularJS component require: componentOne OR componentTwo

javascript

angularjs

angularjs-components