Angular 9: вызов по подписке вызывает обновление страницы

Question

Я пытаюсь создать приложение в Angular 9, которое отправляет запросы в API Google Книг.

Однако вызов .subscribe в requestBookByISBN(isbn: string) приводит к обновлению страницы sh. Я хочу избежать этого.

  private callAPI(isbn: string): Observable<GoogleBook[]> {

    return this.httpClient
        .get<{ results: GoogleBook[] }>
        (`https://www.googleapis.com/books/v1/volumes?q=${isbn}&key=${ApiLookupService.API_KEY}`)
        .pipe(map(matches => matches.results || []));
  }

  public requestBookByIsbn(isbn: string): GoogleBook[] {
    const bookResults: Observable<GoogleBook[]> = this.callAPI(isbn);
    let books: GoogleBook[] = [];
    bookResults.subscribe(data => books = data);
    return books;
  }

РЕДАКТИРОВАТЬ: Вот часть файла component.ts с соответствующими частями кода:

import {Component, OnInit} from '@angular/core';
import {BookServiceImpl} from '../../shared/Book/service/book.service.impl';
import {CopyServiceImpl} from '../../shared/Copy/service/copy.service.impl';
import {AuthorServiceImpl} from '../../shared/Author/service/author.service.impl';
import {FormControlSettings} from '../FormControlSettings/form.controls.settings';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {Author} from '../../shared/Author/model/Author';
import {first} from 'rxjs/operators';
import {ToastrService} from 'ngx-toastr';
import {Book} from '../../shared/Book/model/Book';
import {Copy} from '../../shared/Copy/model/Copy';
import {SharedService} from '../../shared/services/shared.service';
import {Subscription} from 'rxjs';
import {ApiLookupService} from '../../shared/services/api.lookup.service';

@Component({
    selector: 'app-addbook',
    templateUrl: './addbook.component.html',
    styleUrls: ['./addbook.component.css']
})
export class AddbookComponent implements OnInit {
    // forms 
    public submitted = false;
    public loading = false;
    public error = '';
    public initAuthorsSubscription: Subscription;
    public authors: Author[] = [];
    public selectedAuthors: Author[]; // chosen in ng select

    constructor(private bookService: BookServiceImpl,
                private copyService: CopyServiceImpl,
                private authorService: AuthorServiceImpl,
                private formBuilder: FormBuilder,
                private toastr: ToastrService,
                public sharedService: SharedService,
                public apiLookupService: ApiLookupService) {
    }

    public ngOnInit(): void {
        this.initAuthors();
        this.initBookForm();
        this.getInitAuthorsEvent();
    }

    public findAuthors(ids: number[]): Author[] {
        const authors = [];
        for (const id of ids) {
            this.authorService.findById(id).subscribe(value => authors.push(value));
        }
        console.log(authors);
        return authors;
    }

    public isbnLookUp() {
        console.log(this.apiLookupService.requestBookByIsbn(this.isbnControl.value));
    }

    public initBookForm(): void {
        // assinging form controls

        this.bookForm = new FormGroup({
        // more assigning going on here 
        });
    }

    public initAuthors() {
        this.authorService.findAll().subscribe(data => {
            this.authors = data.map((author) => {
                author.fullName = this.authorService.getFullName(author);
                return author;
            });
        });
    }

    public getInitAuthorsEvent(): any {
        this.initAuthorsSubscription = this.sharedService.initAuthors().subscribe(
            () => this.initAuthors());
    }

    public onSubmit() {
        // values are assigned here 

        this.bookService.add(book)
            .pipe(first())
            .subscribe(
                data => {
                    this.toastr.success('Buch erfolgreich hinzugefügt!');
                    copy.reference = data;
                    for (let i = 0; i < this.amountControl.value; i++) {
                        this.copyService.add(copy).pipe(first()).subscribe();
                    }
                    /*this.sharedService.sendCloseModal();
                    this.sharedService.sendCloseModal();*/
                },
                error => {
                    this.loading = false;
                    this.toastr.warning(error);
                    this.error = error;
                }
            );
    }
}

Другое предположение, что существуют конфликты с другими вызовами подписки.

Answer 1

Я не уверен, является ли это причиной обновления, но bookResults.subscribe является асинхронной операцией, поэтому вы, по сути, возвращаете пустой массив, а затем в какой-то неопределенной точке измените его на полные данные.

У вас есть два варианта решения этой конкретной проблемы: go в RX js или обещаниях:

RX js параметр:

  public requestBookByIsbn(isbn: string): GoogleBook[] {
    return this.callApi(isbn);
  }

И просто дайте Компонент, который вызывает requestBookByIsbn, подписывается и устанавливает данные в компоненте в этой точке.

Опция Promise:

  public async requestBookByIsbn(isbn: string): GoogleBook[] {
    const bookResults: Promise<GoogleBook[]> = this.callAPI(isbn).toPromise();
    return await bookResult;
  }

Я предполагаю, что где происходит refre sh, скорее всего, за пределами той части, которую вы нам показываете.

Если вы перенаправляете на '/ login', чтобы проверить, вошел ли пользователь в систему, то в этом перенаправлении вы должны добавить текущий путь как history указать или параметр запроса, а затем перенаправить на этот путь после завершения входа в систему, а не перенаправить на '/'.