Question

假设我有一个Angular2组件，它有一些输入属性，比如

@Component(...)
class ChildComponent {
   @Input() input1: string;
   @Input() input2: number;
   internalState: any;
}

在另一个组件中使用，甚至可能在列表中使用，如：

<li *ngFor="#item of items">
  <child-component [input1]="item.a" [input2]="item.b">
  </child-component>
</li>

输入参数变异：

Angular2如何决定是否应更新子组件（输入变量设置为新值并调用ngOnChanges生命周期钩子），还是应该销毁它并创建新组件？是否有可能影响这种行为？

我问的原因是因为如果组件除了输入参数之外还有任何内部状态，那么如果它被更新或重新创建它会有所不同。在更新的情况下，它将保持旧的内部状态（例如，如果某些东西被折叠，如果用户输入了某些东西），在重新创建的情况下，我们将获得具有默认状态的新的初始化组件。

根据组件，我肯定有时需要第一种方法，有时需要另一种方法。

如果组件有一些复杂的初始化逻辑并且不存储用户数据，那么我认为将输入视为不可变更容易，并且只在ngOnInit中对组件进行一次初始化，而不是考虑在{{1上需要做什么}}

当存在像给定示例中的子组件列表时，问题变得更加棘手。如果为我提供列表的服务现在在列表中间插入一个新项目并给我一个更新列表（可能是变异列表的变异或新版本） - angular2如何知道我想要一个新的要在列表中间创建的项目，而不是使用新值更新现有项目并在结尾创建新项目？后一种方法会将先前现有项目的内部状态转换为新项目，并将先前现有项目输入数据分配给新创建的组件。

Answer 1

引用NgFor docs：

Angular使用对象标识来跟踪迭代器中的插入和删除，并在DOM中重现这些更改。这对于动画和任何存在的有状态控件（例如接受用户输入的<input>元素）具有重要意义。插入的行可以设置动画，删除的行可以设置为动画，未更改的行保留任何未保存的状态，例如用户输入。

您可能希望阅读文档中的一些其他详细信息。

angular2如何决定是更新还是重新创建组件？

1 个答案: