Obiekty głębokiego kopiowania w Angular

Question

AngularJS ma angular.copy() do głębokiego kopiowania obiektów i tablic.

Czy Angular ma coś takiego?

Answer 1

To pytanie nie jest duplikatem How can I use angular.copy in angular 2, ponieważ PO pyta o kopiowanie głęboko obiektów. Połączona odpowiedź rekomenduje Object.assign(), która nie tworzy głębokiej kopii.

Faktycznie, używając Angular2 nie ograniczają możliwość korzystania z innych bibliotek jak jQuery do głębokiego kopiowania obiektów z ich $.clone() funkcji lub lodash z _.cloneDeep().

Najbardziej powszechne biblioteki mają swoje typowania dostępne za pomocą narzędzi CLI typings, więc nawet przy transporcie z TypeScript możesz bezproblemowo używać czegokolwiek, co chcesz.

zobacz także: What is the most efficient way to deep clone an object in JavaScript?

Answer 2

Inną opcją jest zaimplementować własną funkcję:

/** 
* Returns a deep copy of the object 
*/ 
public static deepCopy(oldObj: any) { 
    var newObj = oldObj; 
    if (oldObj && typeof oldObj === "object") { 
     newObj = Object.prototype.toString.call(oldObj) === "[object Array]" ? [] : {}; 
     for (var i in oldObj) { 
      newObj[i] = this.deepCopy(oldObj[i]); 
     } 
    } 
    return newObj; 
} 

Answer 3

Można również użyć:

JSON.parse(JSON.stringify(Object))

czy to na swoim zakresem, to w każdy element Angular, dyrektywę itp., a także w każdym środowisku węzła.

O ile nie ma odniesienia cyklicznego, to powinno działać i skutecznie oddzielić odniesienie do zmiennej do oryginalnego obiektu.

Answer 4

Można deep copy obiekt w kątowa stosując metodę cloneDeep lodash za:

Install lodash z yarn add lodash lub npm install lodash.

W komponentu, importować cloneDeep i używać go:

import * as cloneDeep from 'lodash/cloneDeep'; 
... 
clonedObject = cloneDeep(originalObject); 

to tylko 18KB dodany do budowy, warto za korzyści.

Napisałem również article here, jeśli potrzebujesz więcej informacji na temat używania cloneDeep lodasha.