Skip to main content

Angular 注入令牌

Ionic 提供 Angular 注入令牌，允许你通过 Angular 的依赖注入系统访问 Ionic 元素。这提供了一种更符合 Angular 惯用的方式，以编程方式与 Ionic 组件进行交互。

¥Ionic provides Angular injection tokens that allow you to access Ionic elements through Angular's dependency injection system. This provides a more Angular-idiomatic way to interact with Ionic components programmatically.

好处​

¥Benefits

使用注入令牌有几个优点：

¥Using injection tokens provides several advantages:

  • 类型安全：完全支持 TypeScript，并能正确输入模态元素

    ¥Type Safety: Full TypeScript support with proper typing for the modal element

  • Angular 集成：与 Angular 的依赖注入系统无缝协作

    ¥Angular Integration: Works seamlessly with Angular's dependency injection system

  • 简化代码：无需 ViewChild 查询或手动元素引用

    ¥Simplified Code: Eliminates the need for ViewChild queries or manual element references

  • 更好的测试：更容易模拟和测试使用注入令牌的组件

    ¥Better Testing: Easier to mock and test components that use injection tokens

IonModalToken​

IonModalToken 注入令牌允许你将对当前模态元素的引用直接注入到 Angular 组件中。当你需要以编程方式控制模态行为、监听模态事件或访问模态属性时，这尤其有用。

¥The IonModalToken injection token allows you to inject a reference to the current modal element directly into your Angular components. This is particularly useful when you need to programmatically control modal behavior, listen to modal events, or access modal properties.

从 @ionic/angular v8.7.0 开始，你可以使用此注入令牌简化 Angular 应用中的模态框交互。

¥Starting in @ionic/angular v8.7.0, you can use this injection token to streamline modal interactions in your Angular applications.

基本用法​

¥Basic Usage

要使用 IonModalToken，请将其注入到组件的构造函数中：

¥To use the IonModalToken, inject it into your component's constructor:



import { Component, inject } from '@angular/core';




import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';



@Component({
  selector: 'app-modal',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Modal Content</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <p>This is modal content</p>
      <ion-button (click)="closeModal()">Close Modal</ion-button>
    </ion-content>
  `,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
})
export class ModalComponent {
  private modalToken = inject(IonModalToken);

  closeModal() {
    this.modalToken.dismiss();
  }
}

监听模态框事件​

¥Listening to Modal Events

你可以使用注入的模态框引用来监听模态框生命周期事件：

¥You can use the injected modal reference to listen to modal lifecycle events:



import { Component, inject, OnInit } from '@angular/core';




import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';



@Component({
  selector: 'app-modal',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Modal with Events</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <p>Check the console for modal events</p>
      <ion-button (click)="closeModal()">Close</ion-button>
    </ion-content>
  `,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
})
export class ModalComponent implements OnInit {
  private modalToken = inject(IonModalToken);

  ngOnInit() {
    this.modalToken.addEventListener('ionModalWillDismiss', (event) => {
      console.log('Modal will dismiss:', event.detail);
    });

    this.modalToken.addEventListener('ionModalDidDismiss', (event) => {
      console.log('Modal did dismiss:', event.detail);
    });
  }

  closeModal() {
    this.modalToken.dismiss({ result: 'closed by button' });
  }
}

访问模态框属性​

¥Accessing Modal Properties

注入的模态框引用提供对所有模态框属性和方法的访问：

¥The injected modal reference provides access to all modal properties and methods:



import { Component, inject, OnInit } from '@angular/core';




import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';



@Component({
  selector: 'app-modal',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Modal Properties</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <p>Modal ID: {{ modalId }}</p>
      <ion-button (click)="toggleBackdropDismiss()"> Toggle Backdrop Dismiss: {{ backdropDismiss }} </ion-button>
    </ion-content>
  `,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
})
export class ModalComponent implements OnInit {
  private modalToken = inject(IonModalToken);

  modalId = '';
  backdropDismiss = true;

  ngOnInit() {
    this.modalId = this.modalToken.id || 'No ID';
    this.backdropDismiss = this.modalToken.backdropDismiss;
  }

  toggleBackdropDismiss() {
    this.backdropDismiss = !this.backdropDismiss;
    this.modalToken.backdropDismiss = this.backdropDismiss;
  }
}

使用注入令牌打开模态框内容​

¥Opening a Modal with Injection Token Content

打开使用注入令牌的模态框时，你可以将组件直接传递给模态框控制器：

¥When opening a modal that uses the injection token, you can pass the component directly to the modal controller:



import { Component, inject } from '@angular/core';




import { IonContent, IonButton, ModalController } from '@ionic/angular/standalone';


import { ModalComponent } from './modal.component';

@Component({
  selector: 'app-home',
  template: `
    <ion-content>
      <ion-button (click)="openModal()">Open Modal</ion-button>
    </ion-content>
  `,
})
export class HomePage {
  private modalController = inject(ModalController);

  async openModal() {
    const myModal = await this.modalController.create({
      component: ModalComponent,
      componentProps: {
        // Any props you want to pass to the modal content
      },
    });

    await myModal.present();
  }
}

目录