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

【问题标题】：Retrieve data from an API when routing directly to a dynamic route Angular直接路由到动态路由Angular时从API中检索数据
【发布时间】：2020-04-09 13:07:57
【问题描述】：

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

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

路线如下所示

{ 路径：'/users/:username'，组件：'userDetailedComponent' }

【问题讨论】：

标签： angular angular-router

【解决方案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 获取用户名。这个用户名可能会被发送到服务，并且可能会获取所需的数据。

希望这会有所帮助。

【讨论】：