Angular Component：如何为父级中定义的输出绑定函数指定值？

Posted 2023-02-23

【中文标题】Angular Component：如何为父级中定义的输出绑定函数指定值？

【英文标题】：Angular Component: how to specified value for output binding function defined in parent?

【发布时间】：2016-06-27 23:41:18

【问题描述】：

我想使用Angular 1.5's component 从它的单向绑定中获益：<hero-detail hero="ctrl.hero" save="ctrl.save(hero)"></hero-detail>。但是，正如 Todd Motto 在他的博客中指出的那样：Todd Motto's blog: One-way data-binding in Angular 1.5，它只适用于原语。所以我不得不绑定原语：

<hero-detail 
    name="ctrl.hero.name" 
    id="ctrl.hero.id"
    save="ctrl.save(ctrl.hero)"
  ></hero-detail>

然后在组件中，在 $onInit 钩子上，从原语制作 hero 对象：

HeroDetailController.prototype.$onInit = function()
  this.hero = 
    name: this.name,
    id: this.id
   
  console.log('OnInit called');

当用户点击保存时调用指定的函数。奇怪的是，如果用户在组件内更改英雄的名称并单击保存，当调用从父级绑定的函数时，它不会从 hero-detail 组件更改。我做了一个 plunker，它显示了我的问题：Plunk which shows problem with children/parent output binding in Angular 1.5 - 如果你打开开发者控制台，点击“设置名称...”，然后点击保存，你会看到console.logs，它会告诉你来自hero-detail 它是Spawn2，但在父上下文中（逻辑应该在哪里，例如与 $http 服务交谈），它仍然具有旧值 Spawn。我错过了什么吗？ Angular docs 的代码看起来很像我的代码：

<button ng-click="$ctrl.onDelete(hero: $ctrl.hero)">Delete</button>

我不知道发生了什么。预先感谢您帮助我处理这个问题。 附言我在使用 Plunk 版本时遇到了一些问题，现在一切正常 - 在浏览器的开发者控制台中，您可以看到更新问题

【参考方案1】：

为避免混淆变量（父或子）的范围，请在注入变量前加上$。

/* WAS
<hero-detail 
    name="ctrl.hero.name" 
    id="ctrl.hero.id"
    save="ctrl.save(ctrl.hero)"
 ></hero-detail>
 */

//SHOULD BE
<hero-detail 
    name="ctrl.hero.name" 
    id="ctrl.hero.id"
    save="ctrl.save($hero)"
></hero-detail>

然后在你的代码中：

HeroDetailController.prototype.saveHero = function(hero) 
    console.log('Hero name from child: ' + hero.name);
    this.save(
      $hero: hero
    );
;

这样你就可以知道表达式的哪些变量来自父作用域，哪些变量来自指令作用域。

【讨论】：

谢谢您，您的解决方案就像一个魅力，我不知道它以这种方式工作，现在我明白为什么它看起来像了 :) 我查看了组件树章节的示例docs.angularjs.org/guide/component 我认为 Angular 文档仍然需要更好的示例来阐明其复杂性