Извлекайте данные из API при прямой маршрутизации к динамическому c маршруту Angular - PullRequest
Новая
       5

Извлекайте данные из API при прямой маршрутизации к динамическому c маршруту Angular

0 голосов
/ 09 апреля 2020

Вопрос заключается в следующем: как бы я извлекал данные из API при маршрутизации непосредственно на маршрут с динамическим значением c внутри него (например, именем пользователя)

  • Если бы я был для Например, создайте веб-приложение angular для социальных сетей, которое получает данные для каждого пользователя из API. Как мне заполнить данные на странице, перенаправив их непосредственно на страницу этого пользователя.
  • EG -> С Instagram вы можете go напрямую перейти к «instagram.com/ enjusername}», и он получит данные этих пользователей и заполнит страницу ими независимо от того, какого пользователя вы go хотите
    • так что с angular, если бы я должен был перенаправить прямо на mywebapp.com/users/chumberjosh, не переходя ни на какую другую страницу, как бы я получил данные для пользователя 'chumberjo sh 'при инициализации страницы без прохождения через службы и т. д. c так что любой пользователь, которому я go, получит информацию об этом пользователе.
  • Я понимаю, что вы можете перейти, например, с «mywebapp.com/users/» на «mywebapp.com». / users / chumberjo sh 'использование сервисов для хранения и извлечения данных, но я не понимаю, как это будет работать без сохранения данных в любом месте до загрузки страницы.
  • То, как я думаю, это будет работать это просто загрузка страницы, но без каких-либо данных в ней

Маршрут будет выглядеть следующим образом

{путь: '/ users /: username', компонент: 'userDetailedComponent'}

1 Ответ

1 голос
/ 09 апреля 2020

Решением было бы собрать параметр маршрута из 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 мы объявили переменную, считывающую параметр url, используя ActivatedRoutes .

this.router1.snapshot.paramMap.get ('username')) извлечет имя пользователя из URL. Это имя пользователя может быть отправлено в службу, и могут быть получены необходимые данные.

Надеюсь, это поможет.

...