Question

我想在网络应用启动时获取数据。只要获取，我想在屏幕上显示带有黑色背景的标题。数据加载后，标题应淡出（动画）并显示数据。

要获取数据，我在app.component.ts内部调用它：

ngOnInit() {
    this.db.collection('entries').valueChanges()
      .subscribe(val => {
        this.casesService.data = val;
        this.animate = 'final';
      });
   }

this.animate = 'final'应在加载数据后立即触发动画。

我还创建了一个案例服务，以将数据分发到其他组件：

export class CasesService {

  data;

  constructor() { }

  getCase(id: number): Observable<Case> {
    return of(this.data.find(cases => cases.id === id));
  }

  getCases(): Observable<Case> {
    return this.data;
  }
}

已获取数据，但未将其分发给显示此数据的其他组件：

export class PortfolioComponent implements OnInit {

  cases;

  constructor(private db: AngularFirestore, private caseService: CasesService) { }

  ngOnInit() {
    this.cases = this.caseService.data;
  }

}

我认为是这样，因为在初始化时，案例服务内部的cases仍然为空。 如何在获取每个组件后立即将其分发到每个组件，以及如何知道何时显示动画？

数据在加载后立即分发给组件

0 个答案: