Những gì thay thế cho angular.copy trong Angular

Làm thế nào tôi có thể sao chép một đối tượng và mất tham chiếu của nó trong Angular?

Với AngularJS, tôi có thể sử dụng angular.copy(object), nhưng tôi gặp một số lỗi khi sử dụng trong Angular.

NGOẠI TRỪ: ReferenceError: angularkhông được xác định

Giả sử bạn đang sử dụng ES6, bạn có thể sử dụng var copy = Object.assign({}, original). Hoạt động trong các trình duyệt hiện đại; nếu bạn cần hỗ trợ các trình duyệt cũ hơn, hãy kiểm tra polyfill này

cập nhật:

Với TypeScript 2.1+, ký hiệu lan truyền đối tượng ES6 có sẵn:

const copy = { ...original }

Cho đến khi chúng tôi có một giải pháp tốt hơn, bạn có thể sử dụng như sau:

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

EDIT: Làm rõ

Xin lưu ý: Giải pháp trên chỉ có nghĩa là khắc phục nhanh một lớp lót, được cung cấp tại thời điểm Angular 2 đang được phát triển tích cực. Hy vọng của tôi là cuối cùng chúng ta có thể có được một tương đương angular.copy(). Vì vậy, tôi không muốn viết hoặc nhập một thư viện nhân bản sâu.

Phương pháp này cũng có vấn đề với phân tích ngày thuộc tính (nó sẽ trở thành một chuỗi).

Vui lòng không sử dụng phương pháp này trong các ứng dụng sản xuất . Chỉ sử dụng nó trong các dự án thử nghiệm của bạn - những dự án bạn đang làm để học Angular 2.

Cách khác để sao chép sâu các đối tượng có các đối tượng lồng nhau bên trong là sử dụng phương thức cloneDeep của lodash.

Đối với Angular, bạn có thể làm điều đó như thế này:

Cài đặt lodash với yarn add lodashhoặc npm install lodash.

Trong thành phần của bạn, nhập cloneDeepvà sử dụng nó:

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

Chỉ có 18kb được thêm vào bản dựng của bạn, rất xứng đáng với những lợi ích.

Tôi cũng đã viết một bài báo ở đây , nếu bạn cần hiểu rõ hơn về lý do tại sao sử dụng cloneDeep của lodash.

Để sao chép nông, bạn có thể sử dụng Object.assign, một tính năng ES6

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

KHÔNG sử dụng nó để nhân bản sâu

Sử dụng lodash như bertandg chỉ định. Lý do angular không còn có phương pháp này nữa, bởi vì angular 1 là một khung độc lập và các thư viện bên ngoài thường gặp vấn đề với bối cảnh thực thi góc. Angular 2 không có vấn đề đó, vì vậy hãy sử dụng bất kỳ thư viện nào bạn muốn.

https://lodash.com/docs#cloneDeep

Nếu bạn muốn sao chép một thể hiện của lớp, bạn cũng có thể sử dụng Object.assign, nhưng bạn cần truyền một thể hiện mới làm tham số đầu tiên (thay vì {}):

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 !

Giải pháp đơn giản nhất tôi tìm thấy là:

let yourDeepCopiedObject = _.cloneDeep(yourOriginalObject);

* CÁC BƯỚC QUAN TRỌNG: Bạn phải cài đặt lodash để sử dụng cái này (không rõ ràng từ các câu trả lời khác):

$ npm install --save lodash

$ npm install --save @types/lodash

và sau đó nhập nó trong tệp ts của bạn:

import * as _ from "lodash";

Như những người khác đã chỉ ra, sử dụng lodash hoặc gạch dưới có lẽ là giải pháp tốt nhất. Nhưng nếu bạn không cần những thư viện đó cho bất cứ điều gì khác, có lẽ bạn có thể sử dụng một cái gì đó như thế này:

  function deepClone(obj) {

    // return value is input is not an Object or Array.
    if (typeof(obj) !== 'object' || obj === null) {
      return obj;    
    }

    let clone;

    if(Array.isArray(obj)) {
      clone = obj.slice();  // unlink Array reference.
    } else {
      clone = Object.assign({}, obj); // Unlink Object reference.
    }

    let keys = Object.keys(clone);

    for (let i=0; i<keys.length; i++) {
      clone[keys[i]] = deepClone(clone[keys[i]]); // recursively unlink reference to nested objects.
    }

    return clone; // return unlinked clone.

  }

Đó là những gì chúng tôi quyết định làm.

Tôi cần tính năng này chỉ từ mẫu 'mô hình' ứng dụng của tôi (dữ liệu phụ trợ thô được chuyển đổi thành đối tượng). Vì vậy, tôi đã kết thúc bằng cách sử dụng kết hợp Object.create (tạo đối tượng mới từ nguyên mẫu được chỉ định) và Object.assign (sao chép thuộc tính giữa các đối tượng). Cần xử lý các bản sao sâu bằng tay. Tôi đã tạo ra một ý chính cho việc này.

Có cùng một vấn đề và không muốn sử dụng bất kỳ plugin nào chỉ để nhân bản sâu:

static deepClone(object): any {
        const cloneObj = (<any>object.constructor());
        const attributes = Object.keys(object);
        for (const attribute of attributes) {
            const property = object[attribute];

            if (typeof property === 'object') {
                cloneObj[attribute] = this.deepClone(property);
            } else {
                cloneObj[attribute] = property;
            }
        }
        return cloneObj;
    }

Tín dụng: Tôi đã làm cho chức năng này dễ đọc hơn , vui lòng kiểm tra các ngoại lệ đối với chức năng của nó bên dưới

Tôi đã tạo ra một dịch vụ để sử dụng với Angular 5 trở lên, nó sử dụng angular.copy ()cơ sở của angularjs, nó hoạt động tốt với tôi. Ngoài ra có các chức năng khác như isUndefined, vv Tôi hy vọng nó sẽ giúp. Giống như bất kỳ tối ưu hóa, nó sẽ là tốt đẹp để biết. Trân trọng

import { Injectable } from '@angular/core';

@Injectable({providedIn: 'root'})
export class AngularService {

  private TYPED_ARRAY_REGEXP = /^\[object (?:Uint8|Uint8Clamped|Uint16|Uint32|Int8|Int16|Int32|Float32|Float64)Array\]$/;
  private stackSource = [];
  private stackDest = [];

  constructor() { }

  public isNumber(value: any): boolean {
    if ( typeof value === 'number' ) { return true; }
    else { return false; }
  }

  public isTypedArray(value: any) {
    return value && this.isNumber(value.length) && this.TYPED_ARRAY_REGEXP.test(toString.call(value));
  }

  public isArrayBuffer(obj: any) {
    return toString.call(obj) === '[object ArrayBuffer]';
  }

  public isUndefined(value: any) {return typeof value === 'undefined'; }

  public isObject(value: any) {  return value !== null && typeof value === 'object'; }

  public isBlankObject(value: any) {
    return value !== null && typeof value === 'object' && !Object.getPrototypeOf(value);
  }

  public isFunction(value: any) { return typeof value === 'function'; }

  public setHashKey(obj: any, h: any) {
    if (h) { obj.$$hashKey = h; }
    else { delete obj.$$hashKey; }
  }

  private isWindow(obj: any) { return obj && obj.window === obj; }

  private isScope(obj: any) { return obj && obj.$evalAsync && obj.$watch; }


  private copyRecurse(source: any, destination: any) {

    const h = destination.$$hashKey;

    if (Array.isArray(source)) {
      for (let i = 0, ii = source.length; i < ii; i++) {
        destination.push(this.copyElement(source[i]));
      }
    } else if (this.isBlankObject(source)) {
      for (const key of Object.keys(source)) {
        destination[key] = this.copyElement(source[key]);
      }
    } else if (source && typeof source.hasOwnProperty === 'function') {
      for (const key of Object.keys(source)) {
        destination[key] = this.copyElement(source[key]);
      }
    } else {
      for (const key of Object.keys(source)) {
        destination[key] = this.copyElement(source[key]);
      }
    }
    this.setHashKey(destination, h);
    return destination;
  }

  private copyElement(source: any) {

    if (!this.isObject(source)) {
      return source;
    }

    const index = this.stackSource.indexOf(source);

    if (index !== -1) {
      return this.stackDest[index];
    }

    if (this.isWindow(source) || this.isScope(source)) {
      throw console.log('Cant copy! Making copies of Window or Scope instances is not supported.');
    }

    let needsRecurse = false;
    let destination = this.copyType(source);

    if (destination === undefined) {
      destination = Array.isArray(source) ? [] : Object.create(Object.getPrototypeOf(source));
      needsRecurse = true;
    }

    this.stackSource.push(source);
    this.stackDest.push(destination);

    return needsRecurse
      ? this.copyRecurse(source, destination)
      : destination;
  }

  private copyType = (source: any) => {

    switch (toString.call(source)) {
      case '[object Int8Array]':
      case '[object Int16Array]':
      case '[object Int32Array]':
      case '[object Float32Array]':
      case '[object Float64Array]':
      case '[object Uint8Array]':
      case '[object Uint8ClampedArray]':
      case '[object Uint16Array]':
      case '[object Uint32Array]':
        return new source.constructor(this.copyElement(source.buffer), source.byteOffset, source.length);

      case '[object ArrayBuffer]':
        if (!source.slice) {
          const copied = new ArrayBuffer(source.byteLength);
          new Uint8Array(copied).set(new Uint8Array(source));
          return copied;
        }
        return source.slice(0);

      case '[object Boolean]':
      case '[object Number]':
      case '[object String]':
      case '[object Date]':
        return new source.constructor(source.valueOf());

      case '[object RegExp]':
        const re = new RegExp(source.source, source.toString().match(/[^\/]*$/)[0]);
        re.lastIndex = source.lastIndex;
        return re;

      case '[object Blob]':
        return new source.constructor([source], {type: source.type});
    }

    if (this.isFunction(source.cloneNode)) {
      return source.cloneNode(true);
    }
  }

  public copy(source: any, destination?: any) {

    if (destination) {
      if (this.isTypedArray(destination) || this.isArrayBuffer(destination)) {
        throw console.log('Cant copy! TypedArray destination cannot be mutated.');
      }
      if (source === destination) {
        throw console.log('Cant copy! Source and destination are identical.');
      }

      if (Array.isArray(destination)) {
        destination.length = 0;
      } else {
        destination.forEach((value: any, key: any) => {
          if (key !== '$$hashKey') {
            delete destination[key];
          }
        });
      }

      this.stackSource.push(source);
      this.stackDest.push(destination);
      return this.copyRecurse(source, destination);
    }

    return this.copyElement(source);
  }
}

Tôi cũng như bạn phải đối mặt với một vấn đề về công việc angular.copy và angular.Exect vì họ không sao chép đối tượng hoặc tạo đối tượng mà không thêm một số phụ thuộc. Giải pháp của tôi là thế này:

  copyFactory = (() ->
    resource = ->
      resource.__super__.constructor.apply this, arguments
      return
    this.extendTo resource
    resource
  ).call(factory)

let newObj = JSON.parse(JSON.stringify(obj))

Các JSON.stringify()phương pháp chuyển đổi một đối tượng JavaScript hoặc giá trị cho một chuỗi JSON

Bạn có thể sao chép Array như

 this.assignCustomerList = Object.assign([], this.customerList);

Và nhân bản đối tượng như

this.assignCustomer = Object.assign({}, this.customer);

Nếu bạn chưa sử dụng lodash, tôi không khuyên bạn nên cài đặt nó chỉ cho một phương thức này. Tôi đề nghị thay vào đó là một thư viện chuyên ngành hẹp hơn, chẳng hạn như 'bản sao':

npm install clone