Dalam aplikasi Angular saya, saya mencoba menampilkan hasil permintaan posting di komponen lain (yaitu halaman konfirmasi). Saya ingin tahu apa cara terbaik untuk ini. Di komponen saya, kode melakukan permintaan posting yang memposting ke server sebagai berikut:

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Request } from '../../models/request.model'
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AppComponent } from '../../../app.component';
import { nowService } from '../../services/now.service';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';




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


  public loading = false;

  private customer_id = this.appComponent.customer_id;

  serviceForm;

  u_destination_country = [
    { value: 'Choose an option' },
    { value: 'United Kingdom', },
    { value: 'United States of America', },
    { value: 'Russia', },
    { value: 'Moscow', },
    { value: 'Africa', },
  ];

  users = [
    { id: 'Select an option', },
    { id: '1', },
    { id: '2', },
    { id: '3', },
  ];

  devices = [
    { id: 'Select an option', },
    { id: '1', },
    { id: '2', },
    { id: '3', },
  ];

  constructor(private service: nowService,
    private appComponent: AppComponent,
    private router: Router,
    private http: HttpClient

  ) {
  }

  ngOnInit() {
    this.serviceForm = new FormGroup({
      customer_id: new FormControl(this.customer_id),
      si_id: new FormControl('', Validators.required),
      u_destination_country: new FormControl(this.u_destination_country[0], Validators.required),
      u_short_description: new FormControl('', Validators.compose([
        Validators.required,
        Validators.minLength(5),
        Validators.maxLength(80)
      ])),
      u_message_description: new FormControl(''),
    });
  }

  onSubmit() {
    this.http.post("/api/inc",
      this.serviceForm.value,
      {
        headers: new HttpHeaders().set("Content-Type", "application/json")
      }
    ).subscribe((response: any) => {
      console.log(response);//On success response
      this.router.navigate(['/inc/confirmation']);
    }, (errorResponse: any) => {
      console.log(errorResponse); //On unsuccessful response
    });
    if(this.serviceForm.invalid) {
      this.serviceForm.setErrors({ ...this.serviceForm.errors, 'required': true });
      return;
    }
  }
}

Jadi yang ingin saya lakukan adalah menampilkan nilai display_value yang kira-kira seperti:

result: Array(1)
0:
display_name: "number"
display_value: "INC001"
status: "inserted"
table: "incident"
1
Sole 10 Maret 2019, 02:55

1 menjawab

Jawaban Terbaik

Untuk Angular 7.2.0 dan lebih tinggi:

Anda dapat membuatnya dengan menggunakan NavigationExtras yang ada di dalam Angular Router. Untuk ini, Anda hanya perlu menambahkan dua hal.

Langkah pertama:

Perbarui this.route.navigate(['/inc/confirmation']) ke ini

this.router.navigate(['/inc/confirmation'],{state: {response}});

Langkah kedua:

Di komponen kedua Anda, Anda dapat mengakses state dengan menambahkan ini ke kode Anda

const state = this.router.getCurrentNavigation().extras.state;
this.response = state.response;

Kemudian Anda dapat menampilkannya.

Untuk Angular 7 dan yang lebih rendah:

Langkah pertama:

Perbarui this.route.navigate(['/inc/confirmation']) ke ini

this.router.navigate(['/inc/confirmation'],{queryParams: {value: response.result[0].display_value}});

Langkah kedua:

Di komponen kedua Anda, Anda dapat mengakses state dengan menambahkan ini ke kode Anda

constructor(private route: ActivatedRoute){}
 ...
this.value = this.route.snapshot.queryParamMap.get('value');

Kemudian Anda dapat menampilkannya.

Bila Anda tidak ingin menggunakan param URL:

Anda dapat membuat layanan dengan satu properti

@Injectable({
  providedIn: 'root'
})
export class SharedDataService {
  public sharedData;
  constructor() {
  }
}

Kemudian Anda dapat mengatur sharedData sebelum mengarahkan ke rute lain.

constructor(private sharedService: SharedDataService){}
...
this.sharedService.sharedData = response;
this.route.navigate(['/inc/confirmation']);

Anda bisa mendapatkan data itu di komponen kedua Anda.

constructor(private sharedService: SharedDataService){}
...
this.response = this.sharedService.sharedData;
1
Josef Katič 10 Maret 2019, 02:12