Angular में कंपोनेंट में रूट पैरामीटर्स का उपयोग

आइए अब देखें कि हम कंपोनेंट क्लास के अंदर रूट पैरामीटर्स का उपयोग कैसे कर सकते हैं।

मान लीजिए कि हमारे पास पैरामीटर्स के साथ निम्नलिखित रूट है:

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

मान लीजिए कि हमारे पास विभिन्न पैरामीटर्स के साथ इस कंपोनेंट पर नेविगेट करने के लिए लिंक्स हैं:

app/app.component.html<nav>
  <a
    routerLink="/aaaa/1"
    routerLinkActive="active"
  >
    1
  </a>
  <a
    routerLink="/aaaa/2"
    routerLinkActive="active"
  >
    2
  </a>
  <a
    routerLink="/aaaa/3"
    routerLinkActive="active"
  >
    3
  </a>
</nav>

मान लीजिए कि चाइल्ड कंपोनेंट में निम्नलिखित ऐरे है:

app/aaaa/aaaa.component.tslet arr: string = [
  'a', 'b', 'c', 'd', 'e'
];

export class AaaaComponent {

}

आइए रूट पैरामीटर के मान के आधार पर ऐरे का संबंधित एलिमेंट प्राप्त करें:

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

प्राप्त एलिमेंट को व्यू में प्रदर्शित करें:

app/aaaa/aaaa.component.htmlमान: {{ value }}

typescript[
  {
    name: 'user1',
    surn: 'surn1',
  },
  {
    name: 'user2',
    surn: 'surn2',
  },
  {
    name: 'user3',
    surn: 'surn3',
  },
]