Where do I have to import a page on Ionic 3?

问题

I don't very understand, when I create a simple page with Ionic 3 with the following command ionic g page contact, where exactly have I to link the files and the page?

Only on src/app/app.module.ts with this line?

import { ContactPage } from '../pages/contact/contact';

Why do I need to push it on providers and declarations then? I have to do this for all the page my app will have?

And if I want create a link to this page, I have to import it too on the homepage's typescript file?

Thanks

回答1:

when you create a page using

ionic g page testpage

first we need to import it in app.module.ts file

import { TestpagePage } from '../pages/testpage/testpage';

and in declarations array and entryComponents array

declarations: [
    MyApp,
    HomePage,
    ListPage,
    TestpagePage
  ],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    TestpagePage
  ],

We no need to push it into providers array. and for example, if you want to navigate to this page from homepage, then

-> import testpage in home.ts file

import { TestpagePage } from '../testpage/testpage';

and on button click event,

this.navCtrl.push(TestpagePage);

declarations : In the declarations section we need to include all components and directives we create.If we don't include them here, we'll get an error when we try to use them because Angular won't be able to recognise them in our code.

entryComponents: In the entryComponents section we define any component that is only loaded by its type. This is the case for all Page components since these are all loaded through the Navigation Controller.

Components that are loaded declaratively (i.e. are referenced in another component's template) don't need to be included in the entryComponents array. So as you can see we have some duplication where we have to define our Page components in both the declarations and the entryComponents sections. The reason for having this separate entryComponents section is so that Angular can compile a bundle for the app that will only include the components that are actually used within the app.

providers: In the providers section we can register services for dependency injection. When you register a service in the App Module, it can be used in all the components in your app. However, we don't need to include all our services here, we can also decide to register a service only for a specific component in its @Component decorator.

source: check this URL

回答2:

We don't need to import a page to app.module.ts every time we create a page, that's anti DRY, boring and app.module.ts becomes fat

With the new ionic cli, we can generate a page like as:

ionic generate page pagename

This will generate the page as well as the corresponding module pagename.module.ts . Then you can refer it from any other page by name in STRING. For e.g.:

this.navCtrl.push("pagename");

来源：https://stackoverflow.com/questions/44159378/where-do-i-have-to-import-a-page-on-ionic-3

标签

ionic-framework

ionic3