ImmutableJS 如何与 Angular 2 一起使用？

Question

我已经将 ImmutableJS 与 Angular 2 结合使用了一段时间，因为它在变更检测方面具有性能优势。参见 here.

但是，我不太确定为什么 Immutable 默认与 Angular 2 一起使用。当没有显式数组时，它如何知道如何遍历值并显示它们？它是否每次访问集合的值时都调用 toJS() ？它是否实现了某种 Angular 2 自动调用的方法？

如果是这样，有没有办法定义您自己的也实现此方法的集合？

一个例子：

Component({
    selector: 'list',
    template: '<ul><li *ngFor="#item of items">{{ item.id }}</li></ul>',
    directives: [CORE_DIRECTIVES]
})
export class SiteComponent { 
    items: Immutable.List<Item>;
}

Answer 1

我不是 Angular 用户，但我认为很容易看出下面发生的事情：我假设

ngFor="#item of items"

转换为 for..of 循环的某种等价物。此构造可用于遍历数组，但也可用于一般的任何可迭代对象。（是的，immutable.List 正确实现了可迭代协议）

一些不错的资源：

SO 上的可迭代协议：

Checking whether something is iterable

深度可迭代协议：

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Iteration_protocols

最后：

如果你想 100% 确定，创建一个可迭代的简单结构，但它既不是 Array 也不是 Immutable.List，所以 Angular 不知道如何迭代它但是使用可迭代协议（需要 babel 或 node 的新版本）：

'use strict'
let obj = {}
// obj is iterable with values 1, 2, 3
obj[Symbol.iterator] = function() {
  console.log('Yes, I am using the iterable protocol indeed')
  return [1, 2, 3][Symbol.iterator]()
}
for (let i of obj) {
  console.log(i)  // prints 1, 2, 3
}

现在如果你使用这个结构而不是 immutable.List，你可以很容易地看到调用了迭代器。

ImmutableJS 如何与 Angular 2 一起使用？

How does ImmutableJS work with Angular 2?

typescript

immutable.js

angular