Question

如果我有以下组件：

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

以后，我通过html实例化组件，而没有像这样传递myPropTwo：

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

我可以告诉角度失败，因为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

似乎没有办法在不手动操作的情况下完成您的需要。

组件绑定在技术上是“必需的”，并且只有在添加问号时才可选。但对于单向绑定，这似乎并不意味着什么。如果绑定是可选的并且您不提供它，则该属性不会在组件的控制器上。但是如果需要绑定并且您不提供它，则该属性将作为unix_socket在组件的控制器上。

例如，如果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组件中强制使用绑定属性

1 个答案: