[angular] Angular에서 angular.copy의 대안

Program / 글쓴이

Angular에서 객체를 복사하고 참조를 잃을 수 있습니까?

AngularJS에서는을 사용할 수 angular.copy(object)있지만 Angular에서 사용할 때 오류가 발생합니다.

EXCEPTION : ReferenceError : angular정의되지 않았습니다

답변

ES6을 사용한다고 가정하면을 사용할 수 있습니다 var copy = Object.assign({}, original). 최신 브라우저에서 작동합니다. 구형 브라우저를 지원해야하는 경우이 polyfill을 확인하십시오

최신 정보:

TypeScript 2.1 이상에서는 ES6 속기 객체 스프레드 표기법을 사용할 수 있습니다.

const copy = { ...original }

답변

더 나은 솔루션이 나올 때까지 다음을 사용할 수 있습니다.

duplicateObject = <YourObjType> JSON.parse(JSON.stringify(originalObject));

편집 : 설명

참고 : 위의 솔루션은 Angular 2가 개발중인 시점에 제공된 빠른 수정 1 라이너 일뿐입니다. 내 희망은 우리가 결국angular.copy() . 따라서 딥 복제 라이브러리를 쓰거나 가져오고 싶지 않았습니다.

이 방법에는 날짜 속성 구문 분석에 문제가 있습니다 (문자열이 됨).

프로덕션 앱에서는이 방법을 사용하지 마십시오 . Angular 2를 배우기 위해하고있는 실험 프로젝트에서만 사용하십시오.

답변

내부에 중첩 된 객체가있는 객체를 딥 카피하는 대안은 lodash의 cloneDeep 메소드를 사용하는 것입니다.

Angular의 경우 다음과 같이 할 수 있습니다.

yarn add lodash또는로 lodash를 설치하십시오 npm install lodash.

컴포넌트에서 가져 와서 cloneDeep사용하십시오.

import { cloneDeep } from "lodash";
...
clonedObject = cloneDeep(originalObject);

빌드에 18kb 만 추가되어 이점을 얻을 수 있습니다.

lodash의 cloneDeep을 사용하는 이유에 대한 더 많은 통찰력이 필요한 경우 여기 에 기사를 작성했습니다 .

답변

대한 얕은 ES6 기능은 당신이 Object.assign을 사용할 수 복사

let x = { name: 'Marek', age: 20 };
let y = Object.assign({}, x);
x === y; //false

딥 클로닝에는 사용하지 마십시오

답변

bertandg가 지시 한대로 lodash를 사용하십시오. 각도가 더 이상이 방법을 갖지 않는 이유는 각도 1이 독립형 프레임 워크이고 외부 라이브러리가 종종 각도 실행 컨텍스트에 문제가 있기 때문입니다. Angular 2에는 그러한 문제가 없으므로 원하는 라이브러리를 사용하십시오.

https://lodash.com/docs#cloneDeep

답변

클래스 인스턴스를 복사하려면 Object.assign도 사용할 수 있지만 새 인스턴스를 {} 대신 첫 번째 매개 변수로 전달해야합니다.

class MyClass {
    public prop1: number;
    public prop2: number;

    public summonUnicorn(): void {
        alert('Unicorn !');
    }
}

let instance = new MyClass();
instance.prop1 = 12;
instance.prop2 = 42;

let wrongCopy = Object.assign({}, instance);
console.log(wrongCopy.prop1); // 12
console.log(wrongCopy.prop2); // 42
wrongCopy.summonUnicorn() // ERROR : undefined is not a function

let goodCopy = Object.assign(new MyClass(), instance);
console.log(goodCopy.prop1); // 12
console.log(goodCopy.prop2); // 42
goodCopy.summonUnicorn() // It works !

답변

내가 찾은 가장 간단한 해결책은 다음과 같습니다.

let yourDeepCopiedObject = _.cloneDeep(yourOriginalObject);

* 중요 단계 :
이것을 사용하려면 lodash를 설치해야합니다 (다른 답변과 명확하지 않음).

$ npm install --save lodash

$ npm install --save @types/lodash

그런 다음 ts 파일로 가져옵니다.

import * as _ from "lodash";