首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >返回URL参数对象ANGULAR 6

返回URL参数对象ANGULAR 6
EN

Stack Overflow用户
提问于 2019-05-25 22:56:09
回答 1查看 316关注 0票数 0

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

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-26 00:30:29

将复杂的(嵌套的)对象传递给您的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,它使用服务在组件之间共享数据

希望能有所帮助。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56305938

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档