mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
move lazy loading to angular usage
This commit is contained in:
@ -53,37 +53,6 @@ modalController.dismiss({
|
||||
})
|
||||
```
|
||||
|
||||
### 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 {}
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
@ -132,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
|
||||
|
||||
|
||||
@ -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 {}
|
||||
```
|
||||
Reference in New Issue
Block a user