ngOnInit和Constructor被调用两次 [英] ngOnInit and Constructor are called twice
问题描述
由于某种原因,我两次调用了该函数,但似乎无法弄清原因.
For some reason I'm getting the function being called twice and I can't seem to figure out why.
我在这里看到了这个问题
I see this question here
引用了这个github问题
Which references this github issue
https://github.com/angular/angular/issues/6782
但这似乎表明我在多个地方导入了文件,但我认为情况并非如此.
But that would seem to suggest I'm importing the file in multiple places which I don't believe is the case.
据我所知,我正在利用Ionic 3的延迟加载.
As far as I know I'm taking advantage of Ionic 3's lazy loading.
这里是指向简化后的github存储库的链接,您可以在本地运行该存储库以查看问题(很抱歉,我无法弄清楚使它在plunker或Codepen中运行的最佳方法)
Here is a link to a stripped down github repo you can run locally to see the issue (I'm sorry I can't figure out the best way to get this to run in plunker or codepen)
https://github.com/Jordan4jc/ionic-init-example
该概念的主应用程序首先将令牌从商店中加载出来,然后进行验证,以及它是否仍然是通向EventsPage
的有效途径,但如果不是,它将通向LoginPage
The concept has the main app first load a token out of the store, then verify it and if it's still valid route to the EventsPage
but if it's not it would route to a LoginPage
在这个例子中,我伪造了它,只是假装令牌是有效的,并路由到EventsPage
,正如您在ngOnInit
函数中所看到的(如果将其移入Constructor the
控制台,则会发生事件. log`被调用了两次.这将使我的服务器获取最新数据,所以我真的不想两次访问我的API.
In this example I fake it and just pretend the token is valid and route to the EventsPage
, as you'll see in the ngOnInit
function (and event if I move it into the Constructorthe
console.log` gets called twice. This will be hitting my server to get the latest data so I really don't want to hit my API twice.
这是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();
});
}
}
推荐答案
我相信已经找到了答案.
I believe I have found the answer.
我在堆栈溢出时发现了这个问题
I found this question on stack overflow
一个答案引用了模板编译错误,并且在其余答案中滚动还引用了以下事实:如果模板中存在一个按钮,但没有明确的type="button"
,则浏览器会将其视为提交"按钮,因此使应用多次执行代码.将此属性添加到我在我的应用程序中发现的没有该属性的按钮上,似乎已经解决了该问题.
One answer referenced a template compilation error, and scrolling through the remaining answers one also references the fact that if a button is present in your template without an explicit type="button"
it may be treated as a submit button by your browser and therefore cause the app to execute the code multiple times. Adding this attribute to the buttons I found in my app that did not have it appears to have solved the issue.
这篇关于ngOnInit和Constructor被调用两次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!