Question

** 1。假设一个场景，例如我正在使用navbar，并且该navbar主页中有选项卡并登录首先，当我服务于home的组件时，在其内部调用构造函数，并调用ngOninit。假设现在我导航到登录组件，它也调用了它的构造函数和ngOninit。现在，如果我再次回到家中，为什么又有构造函数和ngOninit称为
2.我正在尝试在家庭组件中制作一个Web应用程序，我从家庭ngOninit内的firebase中获取数据。因此，在初始应用程序加载时，它会从Firebase获取数据。如果我再次从登录组件导航回home组件，则home comp调用ngOninit，并再次点击get service方法，然后重新加载到完整的应用程序，是否有任何解决方法。请给我解决方法**

Answer 1

您必须了解的基本知识是SPA（单页应用程序），该组件具有用于组件的生命周期挂钩，可以提供开发人员或编码人员可以利用并用于其目的的方法。

由于每个组件都是一个类，因此在确定该组件时，肯定会构造函数。按照NgOnInit的定义，也是这样。

我们为您解决的问题的解决方法是实施共享服务。

具有一项服务，该服务可以存储您从firebase中获取的数据。当您从初始组件进行导航时，请在ngOnInit（）挂钩中返回，尝试查看共享服务是否已具有此数据。如果没有数据，则意味着这是第一次加载（或重新加载），并且必须从firebase中获取数据。如果有数据，则意味着它已经获取并保留了数据，我们不需要再次获取数据。

示例：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from "rxjs/BehaviorSubject";

@Injectable()
export class SharedService {

  dataFromFireBase: string;

  constructor() {
  }

  updateData(data) {
    this.dataFromFireBase = data;
  }
}

在组件中：

import { Component, AfterContentChecked } from "@angular/core";
import { SharedService } from "../../common/shared.service";

@Component({
  selector: "app-component1",
  templateUrl: "./component1.component.html",
  styleUrls: ["./component1.component.css"]
})
export class Component1Component implements AfterContentChecked {
  dataFromFB;
  constructor(private sharedService: SharedService) {}

  ngAfterContentChecked() {
    if(!this.sharedService.dataFromFireBase) {
    // you fetch data from firebase into the variable 'dataFromFB'
    this.sharedService.updateData(this.dataFromFB);
    }
  }
}

Answer 2

如果不打算在已经存在数据的情况下不调用服务，那么我相信可以通过在ngOninit内部进行简单的条件检查来实现。

ngOninit() {
  if(!this.data.length){
  // Do the service call here
 }
}

仅当数据数组为空时，才会调用服务

为什么每次导航到组件时都以角度调用每次构造函数和ngOninit？

2 个答案: