Skip to main content

覆盖组件

Ionic 提供了覆盖组件，例如模态框和弹出框，它们可以在应用之上显示内容。在 Angular 中，这些覆盖组件可以使用像 ModalController 和 PopoverController 这样的控制器创建。

🌐 Ionic provides overlay components such as modals and popovers that display content on top of your application. In Angular, these overlays can be created using controllers like ModalController and PopoverController.

创建覆盖层​

🌐 Creating Overlays

可以使用各自的控制器以编程方式创建覆盖层：

🌐 Overlays can be created programmatically using their respective controllers:

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular/standalone';
import { MyModalComponent } from './my-modal.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  constructor(private modalController: ModalController) {}

  async openModal() {
    const modal = await this.modalController.create({
      component: MyModalComponent,
      componentProps: {
        title: 'My Modal',
      },
    });
    await modal.present();
  }
}

自定义注入器​

🌐 Custom Injectors

默认情况下，覆盖组件使用根注入器进行依赖注入。这意味着在路由级别或特定组件树中提供的服务或令牌在覆盖组件内部无法访问。

🌐 By default, overlay components use the root injector for dependency injection. This means that services or tokens provided at the route level or within a specific component tree are not accessible inside the overlay.

injector 选项允许你在创建模态框或弹出框时传入自定义的 Angular Injector。这使得覆盖组件能够访问根注入器中不可用的服务和令牌。

🌐 The injector option allows you to pass a custom Angular Injector when creating a modal or popover. This enables overlay components to access services and tokens that are not available in the root injector.

使用案例​

🌐 Use Cases

自定义注入器在你需要时非常有用:

🌐 Custom injectors are useful when you need to:

  • 从覆盖层内访问路由范围的服务
  • 使用 Angular CDK 的 Dir 指令以支持双向文本
  • 访问任何未在根级别注册的提供者

用法​

🌐 Usage

要使用自定义注入器，请将其传递给 create() 方法：

🌐 To use a custom injector, pass it to the create() method:

import { Component, Injector } from '@angular/core';
import { ModalController } from '@ionic/angular/standalone';
import { MyModalComponent } from './my-modal.component';
import { MyRouteService } from './my-route.service';

@Component({
  selector: 'app-feature',
  templateUrl: './feature.component.html',
  providers: [MyRouteService], // Service provided at route level
})
export class FeatureComponent {
  constructor(private modalController: ModalController, private injector: Injector) {}

  async openModal() {
    const modal = await this.modalController.create({
      component: MyModalComponent,
      injector: this.injector, // Pass the component's injector
    });
    await modal.present();
  }
}

模态组件现在可以注入 MyRouteService：

🌐 The modal component can now inject MyRouteService:

import { Component, inject } from '@angular/core';
import { MyRouteService } from '../my-route.service';

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.component.html',
})
export class MyModalComponent {
  private myRouteService = inject(MyRouteService);
}

创建自定义注入器​

🌐 Creating a Custom Injector

你也可以使用特定的提供者创建自定义注入器：

🌐 You can also create a custom injector with specific providers:

import { Component, Injector } from '@angular/core';
import { ModalController } from '@ionic/angular/standalone';
import { MyModalComponent } from './my-modal.component';
import { MyService } from './my.service';

@Component({
  selector: 'app-feature',
  templateUrl: './feature.component.html',
})
export class FeatureComponent {
  constructor(private modalController: ModalController, private injector: Injector) {}

  async openModal() {
    const myService = new MyService();
    myService.configure({ someOption: true });

    const customInjector = Injector.create({
      providers: [{ provide: MyService, useValue: myService }],
      parent: this.injector,
    });

    const modal = await this.modalController.create({
      component: MyModalComponent,
      injector: customInjector,
    });
    await modal.present();
  }
}

在 Angular CDK 方向性中使用​

🌐 Using with Angular CDK Directionality

一个常见的用例是为覆盖层提供 Angular CDK Dir 指令以支持双向文本：

🌐 A common use case is providing the Angular CDK Dir directive to overlays for bidirectional text support:

import { Component, Injector } from '@angular/core';
import { Dir } from '@angular/cdk/bidi';
import { ModalController } from '@ionic/angular/standalone';
import { MyModalComponent } from './my-modal.component';

@Component({
  selector: 'app-feature',
  templateUrl: './feature.component.html',
})
export class FeatureComponent {
  constructor(private modalController: ModalController, private injector: Injector) {}

  async openModal() {
    const modal = await this.modalController.create({
      component: MyModalComponent,
      injector: this.injector, // Includes Dir from component tree
    });
    await modal.present();
  }
}

弹出框控制器​

🌐 Popover Controller

PopoverController 支持相同的 injector 选项：

🌐 The PopoverController supports the same injector option:

import { Component, Injector } from '@angular/core';
import { PopoverController } from '@ionic/angular/standalone';
import { MyPopoverComponent } from './my-popover.component';

@Component({
  selector: 'app-feature',
  templateUrl: './feature.component.html',
})
export class FeatureComponent {
  constructor(private popoverController: PopoverController, private injector: Injector) {}

  async openPopover(event: Event) {
    const popover = await this.popoverController.create({
      component: MyPopoverComponent,
      event: event,
      injector: this.injector,
    });
    await popover.present();
  }
}

Angular 选项类型​

🌐 Angular Options Types

Ionic Angular 导出它自己的 ModalOptions 和 PopoverOptions 类型，这些类型通过 Angular 特定的属性（如 injector）扩展了核心选项：

🌐 Ionic Angular exports its own ModalOptions and PopoverOptions types that extend the core options with Angular-specific properties like injector:

  • ModalOptions - 用 injector 属性扩展核心 ModalOptions
  • PopoverOptions - 用 injector 属性扩展核心 PopoverOptions

这些类型是从 @ionic/angular 和 @ionic/angular/standalone 导出的：

🌐 These types are exported from @ionic/angular and @ionic/angular/standalone:

import type { ModalOptions, PopoverOptions } from '@ionic/angular/standalone';

Ionic 中的叠加层文档​

🌐 Docs for Overlays in Ionic

有关完整文档和使用示例，请访问 Ionic 中每个覆盖层的文档页面：

🌐 For full docs and to see usage examples, visit the docs page for each of the overlays in Ionic:

目录