Ionic购物清单App标签显示但页面内容无法加载求助

我是Ionic开发初学者，正在开发一款可添加、删除、编辑商品的购物清单App。原本功能正常，在拆分代码并添加服务优化后，App启动时底部标签可正常显示，但所有标签对应的页面内容均无法加载。我期望页面能恢复拆分前的正常加载状态，反复观看9年前的课程视频也未能解决问题，推测是清理代码时误删了关键内容，但对比新旧教程及GitHub项目仍未找到问题所在。

相关代码文件 #

tab1.page.ts #

import { Component } from '@angular/core';
import { GroceriesServiceService } from '../groceries-service.service';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  title = "Grocery List";

  constructor(public groceriesService: GroceriesServiceService) {}

  loadItems(){
    return this.groceriesService.getItems();
  }

  removeItem(item, index){
    this.groceriesService.inputDialogService.presentToast('bottom', item);
    this.groceriesService.removeItem(index);
  }

  editItem(item, index) {
    this.groceriesService.inputDialogService.promptAlert(item, index);
    this.groceriesService.editItem(item, index);
  }

  addItem() {
    this.groceriesService.inputDialogService.promptAlert();
  }
}

tab1.page.html #

<ion-header>
  <ion-toolbar>
    <ion-title>
      <h2>{{title}}</h2> 
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-fab slot="fixed" vertical="top" horizontal="end">
  <ion-fab-button (click)="addItem()">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

<ion-content padding>
  <h3 text-center *ngIf="loadItems().length === 0">
    No items listed.
  </h3>
  <ion-list>
    <ion-item-sliding *ngFor="let item of loadItems(); let i = index">
      <ion-item>
        <div>
          <h5>{{item.name}}</h5>
          <p>{{item.quantity}}</p>
        </div>
      </ion-item>
  
      <ion-item-options>
        <ion-item-option color="success" (click)="editItem(item,i)">
          <ion-icon name="pencil"></ion-icon> 
          <div>
            <p>Edit</p>
          </div>
      </ion-item-option>
          <ion-item-option color="danger" (click)="removeItem(item, i)">
              <ion-icon name="trash"></ion-icon> 
              <div>
                <p>Delete</p>
              </div>
          </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

tabs.page.html #

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon aria-hidden="true" name="basket-outline"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon aria-hidden="true" name="book-outline"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon aria-hidden="true" name="people-outline"></ion-icon>
      <ion-label>Contacts</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

groceries-service.ts #

import { InputDialogService } from './input-dialog.service';

export class GroceriesServiceService {
  items = [];

  constructor(public inputDialogService: InputDialogService) { }

  getItems(){
    return this.items;
  }

  removeItem(index){
    this.items.splice(index, 1);
  }

  editItem(item, index){
    this.items[index] = item;
  }

  addItem(item){
    this.items.push(item);
  }
}

input-dialog-service.ts #

import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';
import { GroceriesServiceService } from './groceries-service.service';

@Injectable({
  providedIn: 'root'
})
export class InputDialogService {
  handlerMessage = '';
  roleMessage = '';
  
  async presentToast(position: 'top' | 'middle' | 'bottom', item) {
    const toast = await this.toastController.create({
      message: "Removing item - " + item.name ,
      duration: 1500,
      position: position
    });
    await toast.present();
  }

  async promptAlert(item?, index?) {
    const alert = await this.alertController.create({
      header: 'Please enter the item information',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            this.handlerMessage = 'Alert canceled';
          },
        },
        {
          text: 'Add',
          role: 'confirm',
          handler: data =>  {
            this.handlerMessage = 'Alert confirmed';
            console.log("Item added: " + data.name);
            if(index != undefined) {
              this.groceriesService.editItem(item, index);
            }
            else {
              this.groceriesService.addItem(data);
            }
          },
        },
      ],
      inputs: [
        {
          name: 'name',
          placeholder: 'Name',
          value: item ? item.name : null
        },
        {
          name: 'quantity',
          type: 'number',
          placeholder: 'Quantity',
          value: item ? item.quantity : null
        }
      ],
    });
    await alert.present();
  }

  constructor(
    private toastController: ToastController, 
    private alertController: AlertController, 
    public groceriesService: GroceriesServiceService
  ) { }
}

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Groceries App</title>
  <base href="/" />

  <meta name="color-scheme" content="light dark" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GroceriesServiceService } from './groceries-service.service';
import { InputDialogService } from './input-dialog.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

1. 服务未正确注册到依赖注入系统 #

GroceriesServiceService缺少@Injectable装饰器，Angular无法创建其实例并注入组件。同时该服务也未添加到AppModule的providers数组中。

修复：
在groceries-service.ts中添加@Injectable装饰器：

import { Injectable } from '@angular/core';
import { InputDialogService } from './input-dialog.service';

@Injectable({
  providedIn: 'root'
})
export class GroceriesServiceService {
  // 原有代码不变
}

2. 循环依赖问题 #

GroceriesServiceService依赖InputDialogService，同时InputDialogService又依赖GroceriesServiceService，导致Angular无法正常初始化服务。

修复：

• 解耦服务依赖，在tab1.page.ts中直接注入InputDialogService：

import { Component } from '@angular/core';
import { GroceriesServiceService } from '../groceries-service.service';
import { InputDialogService } from '../input-dialog.service';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  title = "Grocery List";

  constructor(
    public groceriesService: GroceriesServiceService,
    public inputDialogService: InputDialogService
  ) {}

  removeItem(item, index){
    this.inputDialogService.presentToast('bottom', item);
    this.groceriesService.removeItem(index);
  }

  editItem(item, index) {
    this.inputDialogService.promptAlert(item, index);
  }

  addItem() {
    this.inputDialogService.promptAlert();
  }

  loadItems(){
    return this.groceriesService.getItems();
  }
}

• 移除GroceriesServiceService中的InputDialogService依赖：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GroceriesServiceService {
  items = [];

  constructor() { }

  // 原有方法不变
}

3. 页面组件未在模块中声明 #

Tab1Page、Tab2Page、Tab3Page、TabsPage未添加到AppModule的declarations数组，Angular无法识别并渲染这些组件。

修复：
在app.module.ts中导入并声明页面组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GroceriesServiceService } from './groceries-service.service';
import { InputDialogService } from './input-dialog.service';
// 导入页面组件
import { Tab1Page } from './tab1/tab1.page';
import { Tab2Page } from './tab2/tab2.page';
import { Tab3Page } from './tab3/tab3.page';
import { TabsPage } from './tabs/tabs.page';

@NgModule({
  declarations: [
    AppComponent,
    Tab1Page,
    Tab2Page,
    Tab3Page,
    TabsPage
  ],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

4. 路由配置检查 #

确保AppRoutingModule中正确配置标签页路由，示例如下：

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: '',
    redirectTo: 'tabs',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

完成以上修复后，重启App即可恢复页面正常加载。

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