ngOnInit 和 Constructor 被调用两次答案

【问题标题】：ngOnInit and Constructor are called twicengOnInit 和 Constructor 被调用两次
【发布时间】：2023-04-10 16:24:01
【问题描述】：

由于某种原因，我的函数被调用了两次，但我似乎无法弄清楚原因。

我在这里看到了这个问题

why ngOnInit called twice?

引用了这个 github 问题

https://github.com/angular/angular/issues/6782

但这似乎表明我在多个地方导入文件，但我不认为是这种情况。

据我所知，我正在利用 Ionic 3 的延迟加载。

这是一个精简的 github 存储库的链接，您可以在本地运行以查看问题（很抱歉，我无法找到在 plunker 或 codepen 中运行的最佳方法）

https://github.com/Jordan4jc/ionic-init-example

这个概念让主应用程序首先从商店加载一个令牌，然后验证它，如果它仍然是到 EventsPage 的有效路由，但如果不是，它将路由到 LoginPage

在这个例子中，我伪造了它，只是假装令牌是有效的，然后路由到EventsPage，正如你将在ngOnInit 函数中看到的那样（如果我将它移到Constructortheconsole 中会发生事件。 log` 被调用了两次。这将访问我的服务器以获取最新数据，所以我真的不想两次访问我的 API。

编辑：这是app.component.ts中的内容

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {Storage} from '@ionic/storage';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, storage: Storage) {
    platform.ready().then(() => {
      storage.ready().then(()=>{
        // pretend we loaded a JWT and verified it
        this.rootPage = 'EventsPage';
      });
      splashScreen.hide();
    });
  }
}

【问题讨论】：

能否请您添加app.component.ts代码的内容？
@sebaferreras 我用app.component.ts 文件的内容编辑了帖子
@sebaferreras 你找到原因了吗？我的快速路线被调用了两次。我很确定 Angular 是罪魁祸首。我认为编译器在开发模式下重新加载浏览器两次。这可以解释为什么 console.logs 没有两次显示相同的东西

标签： angularjs ionic-framework ionic3

【解决方案1】：

我相信我已经找到了答案。

我在堆栈溢出时发现了这个问题

why ngOnInit called twice?

一个答案引用了模板编译错误，滚动浏览其余答案还引用了这样一个事实，即如果您的模板中存在一个按钮而没有明确的 type="button" 它可能会被您的浏览器视为提交按钮，因此导致应用程序多次执行代码。将此属性添加到我在我的应用程序中找到但没有它的按钮似乎已经解决了这个问题。

【讨论】：