تعديل سجل عن طريق نقل المعرّف عبر الرابط (update record in angular pass id by URL)

 في Angular ، يمكنك تحديث سجل عن طريق تمرير المعرف عبر عنوان URL. يتم ذلك بشكل شائع باستخدام معلمات المسار.

لتحديث سجل ، تحتاج عادةً إلى إرسال البيانات المحدثة إلى الخادم ، جنبًا إلى جنب مع معرف السجل الذي تريد تحديثه. فيما يلي مثال على كيفية تحقيق ذلك في Angular:

حدد مسارًا لتحديث السجل في تطبيق Angular الخاص بك. يمكنك القيام بذلك في وحدة التوجيه الخاصة بك ، والتي تسمى عادةً app-routing.module.ts. على سبيل المثال:

1. import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';
   import { UpdateComponent } from './update.component';
   
   const routes: Routes = [
     { path: 'update/:id', component: UpdateComponent }
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }

2- تصدير فئة AppRoutingModule {} قم بإنشاء مكون للتعامل مع وظيفة التحديث. في هذا المثال ، سنستخدم UpdateComponent:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataService } from './data.service';

@Component({
  selector: 'app-update',
  templateUrl: './update.component.html',
  styleUrls: ['./update.component.css']
})
export class UpdateComponent implements OnInit {
  id: number;

  constructor(private route: ActivatedRoute, private dataService: DataService) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = +params['id'];
    });
  }

  updateRecord() {
    // Implement the logic to update the record using the data service
    this.dataService.updateRecord(this.id, updatedData).subscribe(response => {
      // Handle the response
    });
  }
}

في المثال أعلاه ، يتم استخراج معلمة id من عنوان URL باستخدام خدمة ActivatedRoute. تشترك طريقة ngOnInit في المعلمات التي يمكن ملاحظتها ، والتي توفر معلمات المسار الحالية. يتم استدعاء طريقة updateRecord عند بدء إجراء التحديث ، وهي تستخدم المعرف والبيانات المحدثة لإرسال الطلب إلى الخادم. 

3- قم بتطبيق DataService لمعالجة طلبات HTTP لتحديث السجل. إليك مثال مبسط:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  apiUrl = 'https://api.example.com/';

  constructor(private http: HttpClient) { }

  updateRecord(id: number, updatedData: any) {
    const url = `${this.apiUrl}/records/${id}`;
    return this.http.put(url, updatedData);
  }
}

في هذا المثال ، ترسل طريقة updateRecord طلب PUT إلى الخادم بالبيانات المحدثة ومعرف السجل.

باتباع هذه الخطوات ، يمكنك تحديث سجل في Angular بتمرير المعرف عبر عنوان URL.