主页 / 问题 / 1066536
Accepted
Alexandr
Asked:2020-01-06 21:12:57 +0000 UTC2020-01-06 21:12:57 +0000 UTC

angular8 将对象传递给 router.navigate 上的组件

  • 772

UPD 新的 editCustomer 方法

  editCustomer(editCustomer: Customer) {
    this.router.navigate(['edit-customer'], { state: {id: editCustomer.id, name: editCustomer.name,
      address: editCustomer.address, phones: editCustomer.phones } });
  }
但是快照中的组件是空的

export class EditCustomerComponent implements OnInit {

  editCustomerForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private customersClient: CustomersClient,
              private router: Router, private activatedRoute: ActivatedRoute) {
    this.editCustomerForm = this.formBuilder.group({
      name: [this.activatedRoute.snapshot.paramMap.get('name'), Validators.required],
      address: [this.activatedRoute.snapshot.paramMap.get('address'), Validators.required],
      phones: [this.activatedRoute.snapshot.paramMap.get('phones'), Validators.required]
    });
   }
   // остальной код
  }

必须将对象传递给组件才能执行其修改。我希望将表中的对象传递给负责编辑它的组件。

到目前为止，我已经这样做了：

要传递到的组件的 TS（ctor 中的客户变量）

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CustomersClient, Customer } from 'src/app/api-service.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-edit-customer',
  templateUrl: './edit-customer.component.html',
  styleUrls: ['./edit-customer.component.scss']
})
export class EditCustomerComponent implements OnInit {

  editCustomerForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private customersClient: CustomersClient, private customer: Customer,
              private router: Router) {
    this.editCustomerForm = this.formBuilder.group({
      name: [customer.name, Validators.required],
      address: [customer.address, Validators.required],
      phones: [customer.phones, Validators.required]
    });
   }

  ngOnInit() {
  }

  editCustomer() {
    this.customersClient.putCustomer(this.customer.id, this.editCustomerForm.value).subscribe(data => {
      console.log('yspex');
    });
  }

  toCustomerList() {
    this.router.navigate(['list-customer']);
  }
}

从我想传输的地方看起来像什么

import { element } from 'protractor';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { CustomersClient, Customer } from 'src/app/api-service.service';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { Router } from '@angular/router';

@Component({
  selector: 'app-list-customer',
  templateUrl: './list-customer.component.html',
  styleUrls: ['./list-customer.component.scss']
})
export class ListCustomerComponent implements AfterViewInit, OnInit {
  customers = new MatTableDataSource<Customer>();
  displayedColumns: string[] = ['id', 'name', 'address', 'phones', 'actions'];
  paginator: MatPaginator;
  sort: MatSort;


  constructor(private customersClient: CustomersClient, private router: Router) { }

  // ... другой код

  editCustomer(customer: Customer) {
    this.router.navigate(['edit-customer']);
  }

}

实际上，它在 UI 中的外观。这个想法是这样的 - 根据用户单击“编辑”的对象，该对象被转移到组件，而不需要对数据库的新请求 在此处输入图像描述

frontend

1 个回答

  1. Best Answer

    总的来说，我不明白 state 提出的选项是如何工作的，所以我做得相当笨拙（但我做了主要的事情）

    export class EditCustomerComponent implements OnInit {

  editCustomerForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private customersClient: CustomersClient,
              private router: Router, private activatedRoute: ActivatedRoute) {
    this.editCustomerForm = this.formBuilder.group({
      id: [this.activatedRoute.snapshot.queryParamMap.get('id'), null],
      name: [this.activatedRoute.snapshot.queryParamMap.get('name'), Validators.required],
      address: [this.activatedRoute.snapshot.queryParamMap.get('address'), Validators.required],
      phones: [this.activatedRoute.snapshot.queryParamMap.get('phones'), Validators.required]
    });
   }
   // ......
}

    从 ListCustomerComponent 传递参数的方法

      editCustomer(editCustomer: Customer) {
this.router.navigate(['edit-customer'],  { queryParams: {id: editCustomer.id, name: editCustomer.name,
  address: editCustomer.address, phones: editCustomer.phones } });

    }

    • 0

相关问题