直接路由到动态路由 Angular 时从 API 检索数据

Question

The question is: How would I retrieve data from an API when routing directly to a route with a dynamic value inside of it (eg a username)

• If I was to for example create a social media angular web application that gets its data for each user from an API, how would I populate the data on the page by routing directly to that users page.
• EG -> With Instagram, you can go directly to 'instagram.com/{username}' and it will get that users data and populate the page with it no matter what user you go to
  • so with angular if I was to route directly to 'mywebapp.com/users/chumberjosh' without going through any other page, how would I get the data for the user 'chumberjosh' on init of the page without going through services etc. so that whatever user I go to, it will get that users information.
• I understand that you can route from eg 'mywebapp.com/users/' to 'mywebapp.com/users/chumberjosh' using services to store and retrieve data but I don't understand how it would work without the data being stored anywhere before the page is loaded.
• The way I think it will work is by just loading the page but without any data in it

The route would look like this

{ path: '/users/:username', component: 'userDetailedComponent' }

Answer 1

The solution would be to gather the route parameter from the url.

{ path: '/users/:username', component: 'userDetailedComponent' }

From the above you are passing in the username along with the route. Now at ngOnInit you can gather the user name from the url by the code below

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

@Component({
  selector: 'app-userdetails',
  templateUrl: './userdetails.component.html',
  styleUrls: ['./userdetails.component.css']
})

export class UserdetailsComponent implements OnInit {

  constructor( private service: Service, private router1: ActivatedRoute) { }
  username:string ='';
  ngOnInit(): void {    
    this.username = this.router1.snapshot.paramMap.get('username'));
    this.service.getdetails('username').subscribe((data)=>{
      console.log(data);

    });
  }

In the above code, ongOnInit, we have declare a variable reading the url parameter using the .

this.router1.snapshot.paramMap.get('username')) will fetch the username from the url. This user name may be send to the service and the required data may be fetched.

Hope this helps.