ImmutableJS如何与Angular 2一起使用？

Question

我一直在使用ImmutableJS和Angular 2,因为它在变化检测中具有性能优势.看到这里.

但是,我不太确定,为什么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循环.此构造可用于迭代Arrays,但也可用于任何可迭代的.(是的,immutable.List正确实现可迭代协议)

一些优秀的资源:

SO上的可迭代协议:

检查某些内容是否可迭代

可迭代的协议:

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,您可以很容易地看到调用迭代器.