<ion-content> 不是 Ionic 7.2 中的已知元素

Question

以下是我采取的步骤：

1. 我使用 ionic 启动模板空白创建了一个 Ionic 7.2 的新项目
2. 创建了一个新页面：ionic g 页面主页/item-detail

我收到以下错误：

`错误：src/app/home/item-detail/item-detail.page.html:3:1 - 错误 NG8001：“ion-content”不是已知元素： [ng] 1. 如果“ion-content”是 Angular 组件，则验证它是否是该模块的一部分。 [ng] 2. 如果“ion-content”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。 [ng] [ng] 3

[ng] src/app/home/item-detail/item-detail.page.ts:5:16 [ng] 5 templateUrl: './item-detail.page.html', ~~~~~~~~~~~~~~~~~~~~~~~~~ [ng] 组件 ItemDetailPage 的模板发生错误。 `

我遗漏了一些非常明显的东西。 以下是代码： 应用程序模块.ts

import { Component, inject } from '@angular/core';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonRow,
  IonCol,
  IonIcon,
  IonThumbnail, IonImg, IonCard, IonLabel, IonText, IonSearchbar, IonButtons, IonButton, IonBadge
} from '@ionic/angular/standalone';

import { ApiService } from '../services/api/api.service';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,  
  imports: [
    /*    God, I hate this. Why can't Ionic have normal tags as HTML?   */
    IonBadge,     IonButton,     IonButtons,
    IonSearchbar, IonText,       IonLabel,
    IonCard,      IonImg,        IonIcon,
    IonCol,       IonRow,        IonThumbnail,
    IonHeader,    IonToolbar,    IonTitle,
    IonContent,   RouterLink 
  ],  
})
  
export class HomePage {

  items: any[] = [];
  allItems: any[] = [];                 /* Which also iniatialize to an empy array */
  query!: string;                       /* query! == it is not null */

  //Call the 'services/api/api.service.ts' to the Home Page
  //You can inject it to the constructor()
  private api = inject(ApiService);

  constructor() { }

  /* What the hell is ngOnInit() ? -- It is something to start */
  ngOnInit() {
    console.log('ngoninit homepage');
    this.getItems();
  }
  //Create a function to get the items that are in: /services/api/api.service.ts
  getItems() {
    this.allItems = this.api.items;     /* allItems (which is the new variable created) will get the info of api.items */
                                        /* allItems have the gifts items (our products) that are available throw the api services */
    
    /* There will be a Search Bar as well */
    this.items = [...this.allItems];
  }

  onSearchChange(event: any) {
    console.log(event.detail.value);

    this.query = event.detail.value.toLowerCase();
    this.querySearch();                 /* querySearch is a function */
  }

  querySearch() {
    this.items = [];
    if (this.query.length > 0) {
      this.searchItems();
    } else {
      this.items = [...this.allItems];
    }
  }

  /* Basically, it searchs the items == item.name */
  searchItems() {
    this.items = this.api.items.filter((item) => 
      item.name.toLowerCase().include(this.query)
    );
  }

}

Answer 1

首先，问题出在

item-detail.page.html

，所以我们需要关注该组件，我猜该组件是独立的。所以你需要注意，如果一个组件是独立的，它不会从父模块或组件继承任何东西，所以你必须单独导入它。如果您厌倦了这种方法，请创建一个包含所有离子导入的模块，然后导入该模块（应在导出数组中包含相同的导入），以摆脱导入工作。

import { NgModule } from '@angular/core';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonRow,
  IonCol,
  IonIcon,
  IonThumbnail, IonImg, IonCard, IonLabel, IonText, IonSearchbar, IonButtons, IonButton, IonBadge
} from '@ionic/angular/standalone';

@NgModule({
    imports: [
    IonBadge,     IonButton,     IonButtons,
    IonSearchbar, IonText,       IonLabel,
    IonCard,      IonImg,        IonIcon,
    IonCol,       IonRow,        IonThumbnail,
    IonHeader,    IonToolbar,    IonTitle,
    IonContent,
    ],
    exports: [
    IonBadge,     IonButton,     IonButtons,
    IonSearchbar, IonText,       IonLabel,
    IonCard,      IonImg,        IonIcon,
    IonCol,       IonRow,        IonThumbnail,
    IonHeader,    IonToolbar,    IonTitle,
    IonContent,

    ]
})
export class IonicSharedModule { }

如果 ItemDetailComponent 是独立的，请将

IonContent

添加到导入数组中。

import {IonContent} from '@ionic/angular/standalone';
...

...
@Component({
    standalone: true,
    imports: [
      ...
      IonContent,
      ...
    ],
    ...
})
export class ItemDetailComponent {
    ...

如果组件不是独立的，请转到声明组件

declarations

数组的位置。然后导入

IonContent

。

import {IonContent} from '@ionic/angular/standalone';
...

...
@NgModule({
    ...
    imports: [
      ...
      IonContent,
      ...
    ]
    ...
})
export class SomeModule {}