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

Question

问题是：当直接路由到其中包含动态值（例如用户名）的路由时，我如何从 API 检索数据

例如，如果我要创建一个社交媒体 angular 网络应用程序，从 API 获取每个用户的数据，我将如何通过直接路由到页面上填充数据该用户页面。
E.G -> 使用 Instagram，您可以直接转到 'instagram.com/{username}'，无论您转到哪个用户，它都会获取该用户数据并用它填充页面
- 所以对于 angular 如果我要直接路由到 'mywebapp.com/users/chumberjosh' 而无需经过任何其他页面，我将如何在页面初始化时获取用户 'chumberjosh' 的数据无需通过服务等，这样无论我去哪个用户，它都会获得该用户的信息。
我知道您可以从例如'mywebapp.com/users/' 到 'mywebapp.com/users/chumberjosh' 使用服务来存储和检索数据，但我不明白如果在加载页面之前将数据存储在任何地方，它会如何工作。
我认为它的工作方式是只加载页面但不包含任何数据

路线看起来像这样

{ 路径：'/users/:用户名'，组件：'userDetailedComponent' }

Answer 1

解决方案是从 url 中收集路由参数。

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

从上面你传递了用户名和路由。现在在 ngOnInit 中，您可以通过下面的代码

从 url 中收集用户名

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);

    });
  }

在上面的代码 ongOnInit 中，我们使用 ActivatedRoutes.

声明了一个读取 url 参数的变量

this.router1.snapshot.paramMap.get('username')) 将从 url 中获取用户名。可以将此用户名发送到服务并获取所需的数据。

希望对您有所帮助。

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

Retrieve data from an API when routing directly to a dynamic route Angular

angular

angular-router