Angular කොම්පොනන්ට් එකක ඇති රූට් පරාමිතීන්ගේ අගයන්

අපි රූට් වල අර්ථ දක්වන පරාමිතීන්ගේ අගයන් කොම්පොනන්ට් පන්තිය තුළ ලබා ගත හැකිය. එය කළ හැකි ආකාරය බලමු. පහත දැක්වෙන පරාමිති සහිත රූට් එකක් අප සතුව ඇතැයි සිතමු:

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

මෙම පරාමිතියේ අගය අපි කොම්පොනන්ට් පන්තිය තුළ ලබා ගනිමු. මෙහිදී සැලකිලිමත් විය යුත්තේ රූට් පරාමිතිවල අගයන් ලබා ගත හැක්කේ එම රූට් සමඟ බැඳුණු කොම්පොනන්ට් එකේ පමණක් බවයි. අපගේ නඩුවේදී රූට් සමඟ Aaaa කොම්පොනන්ටය බැඳී ඇත. එබැවින් ඉදිරියට එය සමඟ වැඩ කරමු.

එබැවින්, රූට් පරාමිතීන්ගේ අගයන් ලබා ගැනීමට අවශ්‍ය වන්නේ ActivatedRoute සේවාව භාවිතා කිරීමයි. එය අපගේ කොම්පොනන්ට් එකට ආයාත කරමු:

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

සේවාව ඉදිකිරීම් කරු තුළට හඳුන්වා දෙමු:

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

පරාමිති සහිත වස්තුව ලබා ගනිමු:

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

අපගේ පරාමිතියේ අගය ලබා ගනිමු:

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