如何在 angularJs 组件中强制绑定属性

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

似乎没有一种方法可以在不手动完成的情况下完成您的需要。

组件绑定在技术上 "required" 是自动的，只有在您添加问号时才可选。但是对于单向绑定来说，这似乎意义不大。如果绑定是可选的并且您不提供它，那么属性根本不会在您的组件的控制器上。但是如果绑定是必需的而你没有提供它，那么属性将作为 undefined.

在你的组件的控制器上

例如，如果 myPropOne 是可选的并且您没有提供它，那么在记录控制器对象时您将看不到它。如果您只提供 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而你没有提供，那么属性实际上在控制器上，但它是undefined。所以如果你记录控制器对象你会看到它：

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
    }
}

使用 = 绑定时差异似乎更明显。如果绑定是必需的，并且您没有提供它但您尝试在组件的控制器中分配给它，您将得到一个错误。这是有道理的，因为 Angular 不知道如何传播更改。

如何在 angularJs 组件中强制绑定属性

How can I make a bindings property mandatory in an angularJs component

javascript

angularjs

angularjs-components

如何在 angularJs 组件中强制绑定 属性

How can I make a bindings property mandatory in an angularJs component

javascript

angularjs

angularjs-components

如何在 angularJs 组件中强制绑定属性