时间戳

首页 > 解决方案 > 返回 URL 参数对象 ANGULAR 6

angular - 返回 URL 参数对象 ANGULAR 6

问题描述

我想查看在前一个屏幕上选择的计划数据，然后提交包含所有数据的表单。在 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>

目标是显示先前选择的计划中的数据

在此处输入图像描述

标签： angularangular6

解决方案

将复杂（嵌套）对象传递给您的 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 
  }
}

我为您创建了一个演示，它使用服务在组件之间共享数据

希望能帮助到你。

推荐阅读