Question

angular.module("app").component("first", {
   controller: function() {
      this.getFoo = () => {
         return this.condition ? this.foo : null;
      };
      this.changeCondition = () => {
        this.condition = !this.condition; 
      }
   }
   template: '<div>hello <second foo="$ctrl.getFoo()"></second>' + 
   '<button ng-click="$ctrl.changeCondition()"></button></div>'
})
.component("second", {
   bindings: {
     foo: "<"
   },
   template "<span>using foo here: {{$ctrl.foo}}</span>"
})

有点愚蠢的例子，但我在项目中看到一个值以这种方式传递给子组件。我一直在四处寻找这种反模式的建议，但却无法找到。

是吗？是否存在从函数返回中将值传递给子组件是一件好事？

否则，我脑海中显而易见的事情就是从第一个＆＃34; -component传递$ctrl.foo。

Answer 1

$watch表达式中任何函数的使用都是反模式的。（当你写<component prop="..."时，它会创建一个手表）

原因是这个函数值是每个摘要计算的，所以你的函数运行每个摘要。在正常的应用程序中，你消化时间〜观察者的数量，但如果你有功能 - 谁知道？你必须挖掘每个功能来分析时间。函数也可以修改另一个变量，触发另一个摘要。等

Angularjs组件，通过一个Anti方式传递一个方向绑定？

1 个答案: