ngOnInit 和 Constructor 被调用两次

Question

由于某种原因，我的函数被调用两次，但我似乎不明白为什么。

我在这里看到这个问题

为什么 ngOnInit 调用了两次？

哪个引用了这个github问题

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

但这似乎表明我正在多个地方导入该文件，但我认为情况并非如此。

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

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

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

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

在此示例中，我伪造它并假装令牌有效并路由到EventsPage，正如您将在ngOnInit函数中看到的那样（如果我将其移动到构造函数theconsole.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();
    });
  }
}

Answer 1

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

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

为什么 ngOnInit 调用了两次？

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