Ionic 3 组件与页面 [英] Ionic 3 Component vs Page

问题描述

你能告诉我 Ionic 3 应用程序中的 Component 和 Page 生成器有什么区别吗?看来我也可以在组件内部使用像 ionViewWillLeave 这样的页面生命周期钩子.那么我什么时候应该使用角度生命周期钩子呢?如果相同，那么为什么它有 2 个发电机?希望您对此提供反馈.

Can you tell me what is the difference between Component and Page generator in the Ionic 3 app? It seems I can use page life cycle hooks like ionViewWillLeave inside the component too.So when should I use angular life cycle hooks then? If it is same then Why it has 2 generators? Hope you'll provide a feedback for this.

组件生成器:

 ionic generate component SubscribeTopicComponent

页面生成器:

ionic generate page LoginPage

推荐答案

根据评论中的对话:

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

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.

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

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.

我猜大多数 Ionic 生命周期钩子与用户与整个页面交互的方式更相关(将进入页面，将离开从一个页面，可以进入一个页面，可以从一个页面离开......)和Angular生命周期钩子更多地与单个组件生命的不同阶段相关(输入已经初始化，更改检测器已检查此组件中是否存在更改，...)，如您所见，这可能与用户交互根本没有直接关系，并且通常是用户不知道的事情.

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.

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

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.

这篇关于Ionic 3 组件与页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！