Question

我正在创建一个组件来编辑简单对象的数组。

根据Angular 1.7.2 documentation，组件应在可能的情况下使用单向（<和@）绑定，并在输出回调中使用&绑定。它指出：

但是对于组件，只有拥有数据的组件才应对其进行修改，以使其易于推断出哪些数据已更改，并且什么时候。

关于输入对象和数组，它具体说明：

因此，一般规则是永远不要更改对象或组件作用域中的数组属性。

我的组件接受对象数组作为输入，提供一种编辑这些对象的属性以及将对象插入和删除到数组的方法。如果对象数组在其他位置更改，则组件需要更新其视图。该组件不拥有它接受作为输入的数据。

我已经定义了组件的绑定，如下所示：

{
    objects: "<",
    addObject: "&",
    deleteObject: "&",
    updateObject: "&"
}

考虑到组件不应更改objects数据，该组件必须在objects期间制作$onChanges的本地副本。然后，通过回调将对本地副本的更改传播到父级。

但是，这会在本地副本和原始数据之间造成断开连接。仅在重新分配$onChanges引用本身时触发objects。

解决方案是用对象相等性在objects上放置一个监视，以触发本地副本的创建。这似乎与组件应该做的事情背道而驰，并且我在其他地方看到，组件中使用的$watch被视为拐杖和/或有臭味的设计。

This plunker演示了此问题。

实施此设计的正确方法是什么？

Answer 1

我相信您所引用的文档是专门讨论更改对象或数组属性的，因为此更改不会反映在父范围中。我看不到组件使传入的对象发生变异的任何问题。

在您的示例中-如果通过“对象”绑定将数组传递到组件中-然后您的组件将其“对象”属性设置为其他数组-父级原始数组将不会引用此更改。

与=的区别在于，不会监视组件范围内的绑定属性，这意味着，如果为组件范围内的属性分配新值，则不会更新父范围。但是请注意，父级和组件范围都引用同一对象，因此，如果要更改组件中的对象属性或数组元素，父级仍会反映该更改。因此，一般规则是永远不要在组件范围内更改对象或数组属性。

Answer 2

对于我来说，答案将非常简单-组件不能执行数据操作。您告诉您创建了要编辑数组的组件？然后，您可以在这里开始使用服务。每个服务都是单例，因此您可以在注入它的每个位置引用相同的object属性。 Checkout what AngularJS团队对服务发表了看法

通过作用域管理数据是鲁ck的。范围很容易成为被其他控制器，指令，模型和控制器损坏或弄脏喜欢。它很快就会变得混乱。具有中央渠道（在这种情况下，服务）... 不仅清洁得多，而且管理起来也更容易应用程序不断增长。最后-它使您的代码保持模块化（某些东西 Angular擅长于）。如果您需要其他服务项目，您无需深入研究范围，控制器，过滤器，等等，以找到相关代码-服务中所有内容都在其中！

谈到组件-首先，它们是HTML指令。组件应具有HTML模板。组件的目的是在其模板中反映从父级作用域收到的一些数据，并通过回调将一些事件或数据（这是用户交互的结果）传递给更高级别。如果您需要组件中的外部逻辑-最好将其委托给服务。

单向绑定组件中的对象或数组的Angular方法是什么？

2 个答案: