Передача объектов между компонентами / страницами

Question

Здравствуйте, я передаю объекты между двумя страницами. У меня есть две страницы в Ionic App. Первая страница имеет объект Дефект и отправляет его на вторую страницу. Вторая страница получает объект и вызывает его методы. Передача объектов осуществляется с использованием NavParams, основного класса Ionic. Ниже вы можете увидеть получение объекта. Дефектный объект.

export class Defect {
  public priority: DefectPriority;
  public state: DefectState;
  public note: string;
  public _id: string;
  public posX: number;
  public posY: number;
  public createdAt: number;
  public drawingId: string;
  public images: DefectImage[];

  constructor();
  constructor(posY?: number, posX?: number, note?: string, defectId?: string, drawingId?: string) {
    if (defectId === undefined || defectId === "") {
      throw new Error("incorrect defect id");
    }
    if (posX === undefined || posY === undefined) {
      throw new Error("incorrect coordinates");
    }
    if (drawingId === undefined || drawingId === "") {
      throw new Error("incorrect drawingId");
    }
    if (drawingId === undefined || drawingId === "") {
      throw new Error("incorrect drawingId");
    }
    this.priority = DefectPriority.NORMAL;
    this.createdAt = new Date().getTime();
    this.state = DefectState.REPORTED;
    this._id = defectId;
    this.note = note;
    this.posX = posX;
    this.posY = posY;
    this.drawingId = drawingId;
    this.images = [];
  }

  public getPriority() {
    return this.priority;
  }

  setPriority(value: DefectPriority) {
    if (!Object.values(DefectPriority).includes(value.toString())) {
      throw new Error("incorrect priority")
    }
    this.priority = value;
  }

  public changeState(value: DefectState) {
    this.state = value;
  }

  public setNote(note: string) {
    this.note = note;
  }

  generateImageUrl(creatorName: string): DefectImage {
    const newUrl = ObjectId.generate() + '-' + this._id + '.jpg';
    const defectImage = new DefectImage(newUrl, creatorName, new Date().getMilliseconds());
    this.addImage(defectImage);
    return defectImage;
  }

  addImage(defectImage: DefectImage) {
    if (!this.images) {
      this.images = [];
    }
    this.images.push(defectImage);
  }

Вот класс получения:

defect: Defect;

  constructor(private viewCtrl: ViewController,
              private nav: NavParams,
              private navCtrl: NavController,
              private photo: PhotoProvider) {
    this.defect = this.nav.get('defect');
  }

У класса дефекта, кроме некоторых свойств, есть также такие методы, как: generateImageUrl

Теперь, когда я меняю представление на компонент, в котором дефект извлекается из параметров изнутри, это просто объект JS без информации о методах класса Defect: Что означает, что я не могу вызывать методы, определенные в классе дефекта, после того, как я отправить его на другую страницу.

Обратите внимание, что нет пользовательских методов, таких как generateImageUrl. Есть ли способ, которым я не мог потерять информацию об этом объекте? Или я должен просто воссоздать этот объект из данных в новом компоненте? моя цель на экране ниже:

способ передачи данных:

const defectModal = this.modalCtrl.create(DefectDetailModal, {
      defect: this.defect
    });

Answer 1

Я предполагаю, что Defect является сущностью в вашем приложении. Руководство по стилю Angular рекомендует использовать interface s для моделей данных вместо class es.

Рассмотрите возможность использования интерфейса для моделей данных.

При этом вы должны были создать DefectService, где вы бы задали какое-то свойство для текущего дефекта, с которым вы имеете дело.

Вы могли бы затем внедрить службу в компоненты, между которыми вы хотели бы обмениваться данными. Тогда из одного компонента вы могли бы установить дефект, а затем вы могли бы получить дефект в другом компоненте, используя set ters и get ters.