为什么每次导航到组件时都会在 angular 中调用构造函数和 ngOninit？

Question

** 1 .假设我有导航栏，并且导航栏主页和登录中有选项卡首先，当我为 home 提供服务时，在其构造函数内部调用了 home 组件，并且还调用了 ngOninit。假设现在我导航到登录组件，这也调用了它的构造函数和 ngOninit 。现在，如果我再次导航回主页，为什么又调用了构造函数和 ngOninit
2. 我正在尝试在家庭组件中制作一个网络应用程序，我从家庭 ngOninit 内的 firebase 获取数据。因此，当初始应用程序加载时，它会从 firebase 获取数据。如果我再次从登录组件导航回主组件，主组件调用 ngOninit 并再次点击获取服务方法，然后需要完全应用程序重新加载是否有任何解决方法。请给我解决方案**

Answer 1

如果不想在数据已经存在时调用服务，我相信可以通过在 ngOninit 中进行简单的条件检查来实现。

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

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

Answer 2

您必须了解的基本内容是 angular 是一个 SPA（单页应用程序），具有组件的生命周期挂钩，可以提供开发人员或编码人员可以利用和使用的方法 his/per 目的。

因为每个组件都是一个class，所以肯定组件被调用的时候，构造函数也会被调用。根据 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);
    }
  }
}

为什么每次导航到组件时都会在 angular 中调用构造函数和 ngOninit？

why every time constructor and ngOninit is called in angular when navigate to component?

javascript

angular

angular8

angular2-changedetection