使用 Angular11，我的 HomeComponent 如何检索 DataService 中的 Subject 提供的数据？

Question

为了通过应用程序访问数据，我创建了一个名为 DataService 的新服务，我想将来自 API 的数据存储在一个主题中。虽然我确实获取了数据，但我在 DataService 的日志中看到了对象数组，我在 HomeComponent 中应该获取数据的数组在控制台中未定义：

browser inspector console output

我想我的代码中有一些愚蠢的错误，我是初学者。你能帮帮我吗？

主页组件：

import {Component, OnInit, Output} from '@angular/core';
import {DataService} from '../../shared/services/data.service';
import {Subscription} from 'rxjs';
import {Article} from '../../shared/models/article';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  @Output() articles?: Article[];
  articleSubscription?: Subscription;
  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.emitArticlesSubject(this.dataService.loadArticles());
    this.articleSubscription =
      this.dataService.articlesSubject.subscribe(
        (articles) => {
          this.articles = articles;
        }
      );
    console.log('HOME COMPONENT: ngOnInit: this.articles : ' + JSON.stringify(this.articles));
  }

}

数据服务：

import { Injectable } from '@angular/core';
import {BehaviorSubject, Subject} from 'rxjs';
import {ArticleService} from './article.service';
import {Article} from '../models/article';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  articles?: Article[];
  message = 'Aucun résultat ne correspond à votre recherche.';
  articlesSubject = new Subject<Article[]>();
  constructor(private articleService: ArticleService) { }

  emitArticlesSubject(action: any): void {
    this.articlesSubject.next(action);
  }

  /**
   * Method to be served as a parameter
   * to the 'emitArticlesSubject' method
   * to load articles sorted by date.
   */
  loadArticles(): any {
    this.articleService.getAll().subscribe(
      data => {
        this.articles = data._embedded.articles;
        console.log('DataService: loadArticles() : ' + JSON.stringify(this.articles));
      },
      error => {
        console.log('ERROR: DataService not able to loadArticles !' );
      }
    );
  }
  /**
   * Method to be served as a parameter
   * to the 'emitArticlesSubject' method
   * to load articles sorted by last activity.
   */
  loadArticlesByActivity(): any {
    this.articleService.getAllSortedByActivity().subscribe(
      data => {
        this.articles = data._embedded.articles;
      },
      error => {
        console.log('ERROR: DataService not able to loadArticlesByActivity');
      }
    );
  }
}

文章服务：

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';
import {Article} from '../models/article';
import {ResponseEntities} from '../../core/ResponseEntities';

const baseUrl = 'http://localhost:8080/articles';
const queryUrl = '?search=';
const dateUrl = '?sort=date,desc';

@Injectable({
  providedIn: 'root'
})
export class ArticleService {

  constructor(private http: HttpClient) { }

  getAll(): Observable<ResponseEntities<Article[]>> {
    return this.http.get<ResponseEntities<Article[]>>(`${baseUrl}${dateUrl}`);
  }
  getAllSortedByActivity(): Observable<ResponseEntities<Article[]>> {
    return this.http.get<ResponseEntities<Article[]>>(`${baseUrl}/${dateUrl}`);
  }
  search(term: string): Observable<ResponseEntities<Article[]>> {
    return this.http.get<ResponseEntities<Article[]>>(`${baseUrl}/${queryUrl}${term}`);
  }
  get(id: any): Observable<Article> {
    return this.http.get<Article>(`${baseUrl}/${id}`);
  }
  create(data: any): Observable<any> {
    return this.http.post(baseUrl, data);
  }

  update(id: any, data: any): Observable<any> {
    return this.http.put(`${baseUrl}/${id}`, data);
  }

  delete(id: any): Observable<any> {
    return this.http.delete(`${baseUrl}/${id}`);
  }

  deleteAll(): Observable<any> {
    return this.http.delete(baseUrl);
  }

  findByTag(tag: any): Observable<Article[]> {
    return this.http.get<Article[]>(`${baseUrl}?tag=${tag}`);
  }
}

Answer 1

在您的 HomeComponent 中，在实际获取文章之前，您正在控制台记录 this.articles 的内容。如果你想在文章被获取后记录它们，你可以改为控制台登录订阅：

this.articleSubscription =
  this.dataService.articlesSubject.subscribe(
  (articles) => {
    this.articles = articles;
    console.log('HOME COMPONENT: ngOnInit: this.articles : ' + JSON.stringify(this.articles));
  }
);

Answer 2

问题可能与数据服务中的订阅有关。

this.dataService.emitArticlesSubject(this.dataService.loadArticles());

在这一行中调用了 emitArticlesSubject()。但是 loadArticles() 订阅了底层服务。 emitArticlesSubject() 只调用 loadArticles() 并且不等待其订阅完成。这导致 articlss 未定义。您应该在 loadArticles() 中使用 promise 或更改您的服务结构并直接在您的 HomeComponent 中调用 ArticleService。

使用 Angular11，我的 HomeComponent 如何检索 DataService 中的 Subject 提供的数据？

Using Angular11, how does my HomeComponent retrieve the data provided by the Subject in DataService?

json

subject

typescript

angular