Wie funktioniert ImmutableJS mit Angular 2?

Question

Ich verwende ImmutableJS mit Angular 2 seit einiger Zeit wegen seiner Leistungsvorteile bei der Änderungserkennung. Siehe here.

Ich bin mir jedoch nicht ganz sicher, warum Immutable standardmäßig mit Angular 2 arbeitet. Wie kann es über die Werte iterieren und diese anzeigen, wenn kein explizites Array vorhanden ist? Ruft es bei jedem Zugriff auf die Werte der Sammlung einfach toJS() auf? Implementiert es eine Art von Methode, die Angular 2 automatisch aufruft?

Und wenn ja, gibt es eine Möglichkeit, eigene Sammlungen zu definieren, die diese Methode ebenfalls implementieren?

Ein Beispiel:

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

Ich bin kein Angular Benutzer, aber ich denke, es ist ganz einfach, zu sehen, was darunter passiert: Ich würde davon ausgehen, dass

ngFor="#item of items" 

einige verwandelt Äquivalent von for..of Zyklus. Dieses Konstrukt kann für die Iteration über Arrays verwendet werden, kann aber auch mit allen anderen iterierbaren Methoden verwendet werden. (Und ja, implementiert immutable.List richtig iterable Protokoll)

Einige feine Ressourcen:

iterable Protokoll auf SO:

Checking whether something is iterable

iterable Protokoll in der Tiefe:

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

Schließlich:

Wenn Sie 100% sicher sein wollen, eine einfache Struktur zu erstellen, die iterable ist, aber es ist weder Array noch Immutable.List, so Angular kann nicht wissen, wie es zu wiederholen, aber iterable-Protokoll zu verwenden (erfordert babel oder neue Version 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 
} 

Nun, wenn Sie diese Struktur statt immutable.List verwenden, können Sie leicht erkennen, dass der Iterator aufgerufen wird.