时间戳

首页 > 解决方案 > 为什么每次导航到组件时都会以角度调用构造函数和 ngOninit？

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

问题描述

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

标签： javascriptangularangular8angular2-changedetection

解决方案

您必须了解的基本内容是 Angular 是一个 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);
    }
  }
}

推荐阅读