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 
  }
}

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

希望有帮助。

返回网址参数对象ANGULAR 6

1 个答案: