Ionic中component与page的区别

转自：https://stackoverflow.com/questions/45279191/ionic-3-component-vs-page

It may be the same from the Angular point of view, but Pages and Components have a different meaning in Ionic. In terms of Angular, both are just components, but in the context of Ionic, a Page is a component that will act as an entire view (it may have nested components); we see Ionic pages as a standalone concept. A component will be just part of a bigger component most of the time in Angular apps, so I guess that's the biggest difference with Pages.

About when using Angular's lifecycle hooks, I like to use them when working in nested components, but I prefer Ionic lifecycle hooks when working on pages. Mostly because things like ionViewWillEnter doesn't make too much sense in the context of a simple component, where ngOnInit does. That being said, I also used some Angular lifecycle hooks on Pages, like the ngOnDestroy (I used it to remove all the subscriptions from a page when that page is going to be destroyed), but just like you said, ionViewWillUnload seems to be the right way to do it if we want to use Ionic's lifecycle hooks.

I guess that most of the Ionic lifecycle hooks are more related to the way the user interacts with the page as a whole (will enter to a page, will leave from a page, can enter to a page, can leave from a page...) and Angular lifecycle hooks are more related to the different stages of the life of a single component (the inputs has been initialized, the change detector has checked if there were changes in this component, ...), which as you can see, may not be directly related to the user interaction at all, and usually are things that the user is not aware of.

I'm pretty sure there isn't a rule about which approach is better, but the most important thing is consistency. I think it make sense to use Ionic lifecycle hooks in the components that are Pages, and use Angular lifecycle hooks inside of nested components, but you can use a different approach, as long as you do it consistently in the entire app.

 

从Angular的角度来看可能是相同的，但Pages和Components在Ionic中有不同的含义。就Angular而言，两者都只是组件，但在Ionic的上下文中，Page是一个充当整个视图的组件(它可能有嵌套的组件);我们将Ionic页面视为一个独立的概念。在Angular应用程序中，组件大部分时间只是更大组件的一部分，所以我猜这是与Pages的最大区别。

关于何时使用Angular的生命周期钩子，我喜欢在嵌套组件中使用它们，但在页面上工作时我更喜欢Ionic生命周期钩子。主要是因为像ionViewWillEnter这样的东西在一个简单组件的上下文中没有太多意义，ngOnInit就是这样。话虽这么说，我也在页面上使用了一些Angular生命周期钩子，比如ngOnDestroy(我用它来删除页面上的所有订阅，当该页面将被销毁时)，但就像你说的那样，ionViewWillUnload似乎是如果我们想要使用Ionic的生命周期钩子，那么正确的方法。

我想大多数Ionic生命周期钩子与用户与页面整体交互的方式更相关(将进入页面，将离开页面，可以进入页面，可以从页面离开.. 。)和Angular生命周期钩子与单个组件的生命周期的不同阶段(输入已经初始化，变化检测器检查了这个组件是否有变化，……)有更多相关性，正如你所看到的那样，可能根本不与用户交互直接相关，通常是用户不知道的事情。

我很确定没有关于哪种方法更好的规则，但最重要的是一致性。我认为在作为Pages的组件中使用Ionic生命周期钩子是有意义的，并且在嵌套组件中使用Angular生命周期钩子，但是只要在整个应用程序中一致地执行它，就可以使用不同的方法。