HttpClient 角度。将数据保存在变量中并从其他组件访问。空或未定义

Question

我有一个通过 Httpclient 获取的请求。我遇到的问题是当我尝试访问由其他组件的此请求加载的此变量时。 当我尝试这样做时，我发现它是空的。

这是服务中的方法：

import { HttpClient } from '@angular/common/http';
  ...
  getBooks(page: string) {
    let url = `${this.urlAPI}books?page=${page}`;
    return this.http.get<Book[]>(url).pipe(map((res: Book[]) => res));
  }

这是component.ts中的代码。它是递归的，因为 api 每次只加载 50 个。

  import { ApiService } from 'src/app/services/api.service';
  ...
  books: Book[] = [];
  ...

  constructor(public auth: AuthService, public _api: ApiService, private router: Router) {
    this.loadBooks(1);
  }
  ...
  loadBooks(page: number) {

    this._api.getBooks(page.toString()).subscribe((resp: Book[]) => {

      this.books = this.books.concat(resp);
      if (resp.length !== 0)
        this.loadBooks(page + 1)
      else{
        ...
      }

    });
  }

这是从子组件加载变量的方法：

import { Component, OnInit, Input } from '@angular/core';
import { BooksComponent } from '../../tab/books/books.component';
...
import { ApiService } from 'src/app/services/api.service';


@Component({
  selector: 'app-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.scss'],
  providers: [BooksComponent]
})
export class BookComponent implements OnInit {

  book: Book = new Book();

  constructor(private bc:BooksComponent, public _api: ApiService, private route: ActivatedRoute) {
    console.log(bc.books);
    ...
  }

在父组件之后对子组件的调用。我也知道这是异步调用，所以在它没有完成之前，我还没有填充变量。但是我在查看父组件中的所有数据后调用它。 我不明白为什么如果我填充了变量，这个数组对于其他组件是空的。 谢谢你的回答。

更新： 这是我用来调用书籍组件的 HTML：

<ng-container matColumnDef="detail">
     <th mat-header-cell *matHeaderCellDef> Details </th>
     <td mat-cell *matCellDef="let row">
         <button mat-button (click)="detail(row.url)">
             <mat-icon>info</mat-icon>
         </button>
    </td>
</ng-container>

它是角材料表的一部分。我使用该功能去预订组件。

这是 NgModule：

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ListComponent,
    NavbarComponent,
    ProfileComponent,
    BooksComponent,
    BookComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    APP_ROUTING,
    MaterialModule,
    HttpClientModule
  ],
  providers: [ApiService],
  bootstrap: [AppComponent]
})
export class AppModule { }

父组件是第二个代码。其余代码是关于 MatPaginator、MatSort 或 MatTableDataSource。

更新 2：

我将代码留在 GitHub 中：WikiIceAndFire

Answer 1

从 providers 数组中移除 BooksComponent。您不希望子组件提供自己的 BooksComponent 实例，而是希望 angular 获取已经存在的实例，即父组件。

@Component({
  selector: 'app-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.scss'],
  providers: [BooksComponent] // <= remove this
})
export class BookComponent implements OnInit {...}

Angular 中有一个组件注入器树。当您尝试注入某些东西时，您只需将令牌作为构造函数参数传递。组件注入器开始在组件提供者上寻找该令牌。在这种情况下，组件注入器在它自己的提供者中找到了一个实例，它不是所需的实例（父组件），因此它停止了将发生的递归搜索（通过询问父组件注入器，它会返回正确的实例）。

Answer 2

我注意到了几件事：
1. 不要在providers 中使用Component Services 或其他providers，主要是
2. 使用服务或@Input()/@Output() 在组件之间共享数据。
3. 尽量避免嵌套订阅，递归订阅也一样，因为这将是内存泄漏的主要风险。

现在我的改进想法： 我假设 book 组件被设计为一本书的显示组件。

这是book.component.ts

    import { Component, OnInit, Input } from '@angular/core';
    ...
    import { ApiService } from 'src/app/services/api.service';


    @Component({
      selector: 'app-book',
      templateUrl: './book.component.html',
      styleUrls: ['./book.component.scss'],
    })
    export class BookComponent implements OnInit {

      @Input() book: Book = new Book();

      constructor(public _api: ApiService, private route: ActivatedRoute) {

      }

      ngOnInit() {
        console.log(this.book) // either is new Book() or the given book from its parent (look parent .html)
      }

...
import { ApiService } from 'src/app/services/api.service';
import { Subject } from 'rxjs'
import { mergeMap } from 'rxjs/operators'

@Component({
  ...
})
export class ParentComponent implements OnInit, OnDestroy {

...
  books: Book[] = [];

  private loadPage = new Subject<number>()
...

  constructor(public auth: AuthService, public _api: ApiService, private router: Router) {
    //
  } 

  ngOnInit() {

    this.loadPage
    .pipe(
      mergeMap(number => this.loadBooks(number),
        (page, books) => {
          if (books.length !== 0) {
            this.loadPage.next(page+1)
          }
          return books
        }
      )
    ).subscribe({
      next: books => {
        this.books = this.books.concat(books)
      };
      error: () => console.log("error");
    })    
  }

  ngOnDestroy() {
    this.loadPage.complete()
  }

  loadBooks(page: number) {
    return this._api.getBooks(page.toString())
  }

API 服务保持不变。

还有parent.component.html：

<app-book *ngFor="let book of books" [book]="book"></app-book>