0

UPD новый метод editCustomer

  editCustomer(editCustomer: Customer) {
    this.router.navigate(['edit-customer'], { state: {id: editCustomer.id, name: editCustomer.name,
      address: editCustomer.address, phones: editCustomer.phones } });
  }
Но в компоненте в snapshot пусто

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 компонента, в который надо передать (переменная customer в 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. Задумка такая - в зависимости от того, на каком объекте пользователь нажал "Редактировать" тот объект передается в компонент, без нового запроса в БД введите сюда описание изображения

4
  • см. state 6 янв 2020 в 19:09
  • @overthesanity глянул. через this.activatedRouter.snapshot.paramMap.get('customer'); можно получать только строки. можно ли как-то передать весь объект?
    – Alexandr
    6 янв 2020 в 19:47
  • Так создай объект , заполни нужными параметрами и отправляй етот объект уже его this.router.navigate(['edit-customer'], { state: stateObj } 6 янв 2020 в 21:23
  • @Alexandr paramMap это сериализированные параметры URL, а не состояние. 7 янв 2020 в 12:46

1 ответ 1

0

В общем, как работает предложенный со 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 } });

}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.