Jak działa ImmutableJS z Angular 2?

Question

Używam ImmutableJS z Angular 2 od pewnego czasu, ze względu na jego wydajność w wykrywaniu zmian. Patrz: here.Jednak nie jestem do końca pewien, dlaczego Immutable domyślnie współpracuje z Angularem 2. W jaki sposób wie, jak iterować wartości i wyświetlać je, gdy nie ma jawnej tablicy? Czy po prostu wywołuje toJS() za każdym razem, gdy uzyskuje dostęp do wartości kolekcji? Czy implementuje jakąś metodę, którą Angular 2 automatycznie wywołuje?

A jeśli tak, to czy istnieje sposób zdefiniowania własnych kolekcji, które również wdrażają tę metodę?

Przykład:

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

Nie jestem kątowa użytkownika, ale myślę, że to dość łatwo zobaczyć, co się dzieje pod spodem: Chciałbym założyć, że

ngFor="#item of items" 

przekształca się niektóre odpowiednik cyklu for..of. Konstrukt ten może być użyty do iteracji po tablicach, ale może być również użyty w ogóle do iteracji. (I tak, immutable.List poprawnie implementuje iterowalny protokołu)

Błyskotliwa zasoby:

iterable protokołów na SO:

Checking whether something is iterable

iterable protokół w głębi:

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

Wreszcie:

Jeśli chcesz być w 100% pewien, stworzyć prostą strukturę, która jest iterable, ale nie jest to ani Array ani Immutable.List, więc kątowa nie może wiedzieć, jak go iteracji, ale w użyciu iterowalny protokół (wymaga babel lub nowy wersja 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 
} 

teraz, jeśli używasz tej struktury zamiast immutable.List, można łatwo zauważyć, że iterator jest tzw.