Ionique 3 composant vs Page

Pouvez-vous me dire quelle est la différence entre Component et Page générateur dans le Ionic 3 app? Il semble que je puisse utiliser des crochets de cycle de vie de page comme ionViewWillLeave à l'intérieur du composant too.So quand devrais-je utiliser des crochets de cycle de vie angulaires alors? Si c'est la même chose alors pourquoi il a 2 générateurs? J'espère que vous fournirez une rétroaction pour cela.

Générateur de composants:

 ionic generate component SubscribeTopicComponent

générateur de Page:

ionic generate page LoginPage
29
demandé sur sebaferreras 2017-07-24 14:14:32

2 réponses

Basé sur la conversation des commentaires:

C'est peut - être la même chose du point de vue angulaire, mais les Pages et les composants ont une signification différente en Ionic. en termes D'angulaire, les deux ne sont que des composants , Mais dans le contexte D'Ionic, une Page est un composant qui agira comme une vue entière (Il peut avoir des composants imbriqués); nous voyons les pages ioniques comme un concept autonome . Un composant sera juste une partie d'un composant plus grand la plupart du temps dans Applications angulaires, donc je suppose que c'est la plus grande différence avec les Pages.

A propos de L'utilisation des hooks de cycle de vie D'Angular, j'aime les utiliser lorsque je travaille dans des composants imbriqués, mais je préfère les hooks de cycle de vie Ionic lorsque je travaille sur des pages. Surtout parce que des choses comme ionViewWillEnter n'ont pas trop de sens dans le contexte d'un composant simple, où ngOnInit fait. Cela étant dit, j'ai également utilisé des crochets de cycle de vie angulaires sur les Pages, comme le ngOnDestroy (Je l'ai utilisé pour supprimer tous les abonnements d'une page lorsque cette page va être détruite), mais comme vous l'avez dit, ionViewWillUnload semble être la bonne façon de le faire si nous voulons utiliser les crochets de cycle de vie D'Ionic.

Je suppose que la plupart des des crochets de cycle de vie Ionic sont plus liés à la façon dont l'utilisateur interagit avec la page dans son ensemble (entrera dans une page, partira d'une page, peut entrer dans une page, peut partir d'une page...) et les crochets de cycle de vie angulaires sont plus liés aux différentes étapes de la vie d'un seul composant (les entrées ont été initialisées, le détecteur de changement a vérifié s'il y avait des changements dans ce composant, ...), qui, comme vous pouvez le voir, peuvent ne pas être directement liées à l'interaction de l'utilisateur à tous, et sont généralement des choses que l'utilisateur n'en est pas conscient.

Je suis sûr qu'il n'y a pas de règle sur quelle approche est la meilleure, mais la chose la plus importante est la cohérence. je pense qu'il est logique d'utiliser des crochets de cycle de vie Ionic dans les composants qui sont des Pages, et d'utiliser Angular Lifecycle hooks à l'intérieur des composants imbriqués, mais vous pouvez utiliser une approche différente, à condition de le faire de manière cohérente dans l'ensemble de l'application.

34
répondu sebaferreras 2018-10-04 08:42:29

Il y a deux générateurs séparés car un décorateur supplémentaire a été ajouté à ionic: @ IonicPage

Ce décorateur donne quelques avantages par rapport à un composant simple.

  1. Routage - vous pouvez indiquer quelle est l'url de la page, Comment y arriver et quel est son historique par défaut. Avec cela, vous pouvez accéder à n'importe quelle page directement sans passer par le chemin de navigation. Le routage vers cette page peut également être fait avec une chaîne plutôt que le réel composant

  2. Chargement paresseux - le module d'une page qui a ce décorateur sera chargé par défaut lorsque vous accédez à l'url de la page.

  3. No app module reliance - c'est plus un favori personnel, mais lorsque vous créez des modules qui sont des pages, vous n'avez pas à les ajouter à votre NgModule d'origine et cela se fait automatiquement lors de la compilation.

Pour plus de documentation: https://ionicframework.com/docs/api/navigation/IonicPage/

6
répondu misha130 2017-07-24 16:20:36