Ionic 3中如何引入.ts文件？新手开发Action Sheet相关疑问

嘿，刚入门Ionic的话，关于Action Sheet的.ts文件引入其实很简单，我来一步步给你说清楚～

首先要明确：在Ionic（尤其是Angular版本）中，页面的.ts文件是页面的逻辑控制器，和对应的.html、.css是一一绑定的，不需要额外手动“引入”，只要你的文件结构正确，Ionic会自动关联它们。下面是具体的操作步骤：

1. 确保页面文件结构规范 #

假设你创建了一个用于展示Action Sheet的页面，它的文件结构应该是这样的：

src/app/action-sheet-demo/
├── action-sheet-demo.html
├── action-sheet-demo.css
├── action-sheet-demo.ts
└── action-sheet-demo.module.ts（懒加载页面自动生成）

.ts文件和同目录下的.html、.css文件名完全一致，Ionic会自动识别并关联这三个文件，不需要你手动做引入操作。

2. 在.ts文件中配置Action Sheet的核心逻辑 #

首先你需要在.ts文件中导入Ionic的Action Sheet相关模块，然后注入控制器、定义打开Action Sheet的方法：

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular'; // 导入ActionSheet控制器

@Component({
  selector: 'app-action-sheet-demo',
  templateUrl: './action-sheet-demo.html', // 自动关联对应的html文件
  styleUrls: ['./action-sheet-demo.css'] // 自动关联对应的css文件
})
export class ActionSheetDemoPage {

  constructor(private actionSheetController: ActionSheetController) {} // 注入控制器

  // 定义打开Action Sheet的异步方法
  async openActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: '请选择操作',
      buttons: [
        {
          text: '删除',
          role: 'destructive',
          handler: () => {
            console.log('删除操作触发');
          }
        },
        {
          text: '分享',
          handler: () => {
            console.log('分享操作触发');
          }
        },
        {
          text: '取消',
          role: 'cancel',
          handler: () => {
            console.log('取消操作触发');
          }
        }
      ]
    });
    await actionSheet.present();
  }
}

3. 在.html文件中调用.ts里的方法 #

在对应的.html文件中，只需要添加一个按钮，通过点击事件触发刚才定义的openActionSheet()方法即可：

<ion-content class="ion-padding">
  <ion-button expand="block" (click)="openActionSheet()">打开Action Sheet</ion-button>
</ion-content>

4. 懒加载页面的模块配置（自动完成，无需手动修改） #

如果你的页面是通过ionic generate page命令创建的，会自动生成*.module.ts文件，里面已经帮你完成了.ts文件的导入和组件声明：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ActionSheetDemoPageRoutingModule } from './action-sheet-demo-routing.module';
import { ActionSheetDemoPage } from './action-sheet-demo'; // 自动导入.ts文件

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ActionSheetDemoPageRoutingModule
  ],
  declarations: [ActionSheetDemoPage] // 声明页面组件
})
export class ActionSheetDemoPageModule {}

总结一下 #

• .ts文件是页面的核心逻辑载体，和同目录下同名的.html、.css自动关联，不需要额外引入
• 只需要在.ts中导入ActionSheetController并注入，定义打开Action Sheet的方法
• 在.html中通过点击事件调用这个方法，就能实现功能啦

内容的提问来源于stack exchange，提问作者user379888