Возврат URL объекта параметров ANGULAR 6

Question

Я хочу просмотреть данные плана, которые были выбраны на предыдущем экране, а затем отправить форму со всеми данными.Каков наилучший способ сделать это в Angular?

Он показывает объекты вместо фактических данных в параметрах, как вы видите в консоли.

   import { FormModel } from './../../shared/model';
   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute, Router } from '@angular/router';
   import { ApiService } from './../../shared/api.service';



    @Component({
      selector: 'app-form',
      templateUrl: './form.component.html',
      styleUrls: ['./form.component.css']
    })
    export class FormComponent implements OnInit {

     query: any;
     form: FormModel;

    constructor(
      public apiService: ApiService,
      public actRoute: ActivatedRoute,
      public router: Router
    ) {
      this.form = new FormModel();
    }

    ngOnInit() {
      this.query = this.actRoute.queryParams.subscribe(params => {
      console.log(params);
    });

   }

   enviar(): void {
      console.log(this.form);
      this.resetForm();
  }
  resetForm() {
      this.form = new FormModel();
  }
 }

передача параметров непосредственно по ссылке на страницу.

 <h2>Escolha um plano</h2><br>
 <div class="row">
    <div class="col-md-4" *ngFor="let pl of planoTablet.planos" #card>
       <div class="card w-100">
            <div class="card-body">
               <div class="float-left">
               <h5 class="card-title">{{ pl.franquia }}</h5>
               <p class="card-text">R$ {{ pl.valor }}</p>
            </div>
            <a routerLink="/plataformas/planos/form/{{pl.sku}}/" 
              [queryParams]="planoTablet.planos" class="btn btn-danger btn- 
               lg float-right mt-2" [ngClass]="{'disabled': pl.ativo == 
             false}">Contratar</a>
         </div>
      </div><br>
    </div>
 </div>

цель - показать данные из плана, который был ранее выбран

Answer 1

Как правило, не рекомендуется передавать сложные (вложенные) объекты в URL, поскольку они могут быть закодированы неправильно. Лучше мне будет создать сервис для обмена данными между компонентами.

Простые (плоские) объекты:

Если вы используете простые (плоские) объекты для отправки через queryParams, это нормально. Вы можете отправить их так:

<a routerLink="yourRoute" [queryParams]="{param1: 'hello', param2: 'world'}">Contratar</a>

Сложные объекты

Для сложного объекта вы можете создать сервис. Это было бы что-то вроде этого:

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

@Injectable({
  providedIn: 'root'
})
export class SharingService {
  sharingObject: any;
  constructor() { }

  set sharedValue(obj) {
    this.sharingObject = obj
  }

  get sharedValue() {
    return this.sharingObject 
  }
}

Я создал демонстрационную версию для вас, которая использует сервис для обмена данными между компонентами

Надеюсь, это поможет.