javascript - 如何在 angularJs 组件中强制绑定(bind)属性

Question

如果我有以下组件:

angular.module('myApp').component('myComponent', {
    templateUrl: 'myComponent.html',
    bindings: {
        myPropOne: '<',
        myPropTwo: '<'
    }
});

后来，我通过 html 实例化组件，而不传递 myPropTwo ，如下所示:

<my-component my-prop-one="vm.prop1"></my-component>

我可以告诉 Angular 因为 myPropTwo 没有通过而失败吗？是的，我知道我可以做这样的事情:

angular.module('myApp').component('myComponent', {
    templateUrl: 'myComponent.html',
    bindings: {
        myPropOne: '<',
        myPropTwo: '<'
    },
    controller: function() {
        this.$onInit = function() {
            if(this.myPropTwo  === undefined) {
                throw new Error('myPropTwo must be passed');
            }
        }
    }
});

换句话说，我可以将 myPropTwo 设置为强制，而不必手动执行吗？有没有一种本地方法可以做到这一点？

编辑:

看来@FrankModica 是正确的。这太糟糕了:(...这是 jsFiddle 中的一个示例，希望能够基于 @FrankModica 的回答提供一些理解: https://jsfiddle.net/cafesanu/5L19t3jx/2/

Answer 1

如果不手动执行，似乎没有办法完成您需要的操作。

组件绑定(bind)从技术上来说是自动“必需”的，并且只有在添加问号时才是可选的。但对于单向绑定(bind)来说，这似乎意义不大。如果绑定(bind)是可选的并且您不提供它，则该属性根本不会出现在组件的 Controller 上。但是，如果需要绑定(bind)而您不提供它，则该属性将在组件的 Controller 上显示为 undefined。

例如，如果 myPropOne 是可选的并且您不提供它，则在记录 Controller 对象时您将不会看到它。如果您仅将 myPropTwo 提供为 "prop2"，那么您将看到的就是:

bindings: {
    myPropOne: '<?', // optional
    myPropTwo: '<'   // required
}

controller: function () {
    this.$onInit = function () {
        console.log(this);

        // myPropTwo: "prop2"

        console.log(this.myPropOne === undefined);
        console.log(this.hasOwnProperty('myPropOne'));

        // true
        // false
    }
}

但是，如果 myPropOne 是必需的，而您没有提供它，则该属性实际上位于 Controller 上，但它是未定义。因此，如果您记录 Controller 对象，您就会看到它:

bindings: {
    myPropOne: '<',  // required
    myPropTwo: '<'   // required
}

controller: function () {
    this.$onInit = function () {
        console.log(this);

        // myPropOne : undefined
        // myPropTwo: "prop2"

        console.log(this.myPropOne === undefined);
        console.log(this.hasOwnProperty('myPropOne'));

        // true
        // true
    }
}

使用 = 绑定(bind)时，差异似乎更加明显。如果需要绑定(bind)，并且您不提供它，但尝试在组件的 Controller 中分配给它，则会收到错误。这是有道理的，因为 Angular 不知道如何传播更改。