javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(modal): add lazy loading usage

Browse Source 
docs(modal): add lazy loading usage
This commit is contained in:
Liam DeBeasi
2019-04-05 13:33:52 -04:00
committed by GitHub
parent 48814ab134 2f34f52536
commit 9de09bd4f5
2 changed files with 62 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
core/src/components/modal/readme.md
View File

@ -53,7 +53,6 @@ modalController.dismiss({
}) })
``` ```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
@ -102,6 +101,37 @@ export class ModalExample {
} }
``` ```
#### Lazy Loading
When lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded.
For example, say there exists a `CalendarComponent` and an `EventModal`. The modal is presented by clicking a button in the `CalendarComponent`. In Angular, the `EventModalModule` would need to be included in the `CalendarComponentModule` since the modal is created in the `CalendarComponent`:
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { CalendarComponent } from './calendar.component';
import { EventModalModule } from '../modals/event/event.module';
@NgModule({
declarations: [
CalendarComponent
],
imports: [
IonicModule,
CommonModule,
EventModalModule
],
exports: [
CalendarComponent
]
})
export class CalendarComponentModule {}
```
### Javascript ### Javascript

31
core/src/components/modal/usage/angular.md
View File

@ -38,3 +38,34 @@ export class ModalExample {
} }
``` ```
#### Lazy Loading
When lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded.
For example, say there exists a `CalendarComponent` and an `EventModal`. The modal is presented by clicking a button in the `CalendarComponent`. In Angular, the `EventModalModule` would need to be included in the `CalendarComponentModule` since the modal is created in the `CalendarComponent`:
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { CalendarComponent } from './calendar.component';
import { EventModalModule } from '../modals/event/event.module';
@NgModule({
declarations: [
CalendarComponent
],
imports: [
IonicModule,
CommonModule,
EventModalModule
],
exports: [
CalendarComponent
]
})
export class CalendarComponentModule {}
```