Angular တွင် Component အတွင်း Route Parameters တန်ဖိုးများ

Route များတွင်သတ်မှတ်ထားသော parameter တန်ဖိုးများကို Component class အတွင်းမှရယူနိုင်ပါသည်။ ထိုသို့ပြုလုပ်ပုံကို ကြည့်ကြရအောင်။ အောက်ပါ parameter များပါရှိသော route တစ်ခုရှိသည်ဆိုပါစို့။

app/app.routes.tsconst routes: Routes = [
  { path: 'aaaa/:id', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

ဤ parameter ၏တန်ဖိုးကို Component class အတွင်းမှရယူကြပါစို့။ ဤနေရာတွင် သတိပြုရန်မှာ route parameter တန်ဖိုးများကို ထို route နှင့် ချိတ်ဆက်ထားသော Component အတွင်းမှသာ ရယူနိုင်သည်ကိုဖြစ်သည်။ ကျွန်ုပ်တို့၏ဥပမာတွင် route နှင့် ချိတ်ဆက်ထားသောမှာ Aaaa Component ဖြစ်သည်။ ထို့ကြောင့် နောက်ထပ်၎င်းနှင့်ပဲ လုပ်ဆောင်သွားမည်။

ထို့ကြောင့်၊ route parameter တန်ဖိုးများကိုရယူရန် ActivatedRoute service ကိုအသုံးပြုရပါမည်။ ၎င်းကို ကျွန်ုပ်တို့၏ Component အတွင်းသို့ Import လုပ်ပါမည်။

app/aaaa/aaaa.component.tsimport { ActivatedRoute} from "@angular/router";

Constructor အတွင်းသို့ Service ကို Inject လုပ်ပါမည်။

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    
  }
}

Parameter များပါဝင်သော Object ကိုရယူပါမည်။

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    console.log(params);
  }
}

ကျွန်ုပ်တို့၏ Parameter ၏တန်ဖိုးကိုရယူပါမည်။

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    let id = params['id'];
    console.log(id);
  }
}