Блог

Цель, которую я пытаюсь достичь, состоит в том, чтобы сделать запрос на выборку на основе параметров, полученных с помощью ActivatedRoute, и обновить свойство класса с помощью извлеченных данных. Я выполнил первый шаг этого. Проблема, с которой я сталкиваюсь, заключается в том, чтобы получить эти извлеченные данные в компонент, в котором я работаю. Ниже приведен файл component.ts.

 import { Component, OnInit} from '@angular/core';
import { Spell } from '../spell.model';
import { SpellService } from '../spell.service';
import { ActivatedRoute, Params } from '@angular/router';
import { DataStorageService } from 'src/app/shared/data-storage.service';

@Component({
  selector: 'app-spell-detail',
  templateUrl: './spell-detail.component.html',
  styleUrls: ['./spell-detail.component.css']
})
export class SpellDetailComponent implements OnInit {
  spell: Spell;
  id: number;

  constructor(private spellService: SpellService,
              private route: ActivatedRoute,
              private dataStorageService: DataStorageService) { }

  ngOnInit() {
    this.route.params
    .subscribe( 
      (params: Params) => {
        this.id =  params['id'];
        this.spell = this.spellService.getSpell(this.id);
        this.dataStorageService.fetchSpell(this.spell.url);
      }
    )
  }
}
 

Строка кода: this.dataStorageService.fetchSpell(this.spell.url) инициирует запрос на выборку. Метод fetchSpell приведен ниже.

 fetchSpell(url) {
        return this.http
        .get('https://www.dnd5eapi.co'   url)
        .subscribe((res) => console.log(res))
    }
 

На данный момент результат консоли.оператор log — это данные, в которые я пытаюсь попасть в свой SpellDetailComponent. Я планирую создать свойство с именем spelldata в SpellDetailComponent и обновить его. Как мне это сделать, поскольку запрос на выборку происходит в моем DataStorageComponent?

Вы всегда можете переместить метод subscribe в SpellDetailComponent, где вы вызываете метод. Или я что-то неправильно понял?

 data: any

     ngOnInit() {
        this.route.params
        .subscribe( 
          (params: Params) => {
            this.id =  params['id'];
            this.spell = this.spellService.getSpell(this.id);
            this.dataStorageService.fetchSpell(this.spell.url).subscribe((res) => {
                console.log(res);
                this.data = res; 
                })
          }
        )
 

А потом

 fetchSpell(url) {
        return this.http
        .get('https://www.dnd5eapi.co'   url);
    }