如何在离子中的另一个组件中使用一个组件？

Posted 2023-03-16

【中文标题】如何在离子中的另一个组件中使用一个组件？

【英文标题】：How to use one component inside another component in ionic?

【发布时间】：2021-01-17 14:04:51

【问题描述】：

我有一个显示项目列表的组件。我想为我的项目创建一个单独的组件，然后在列表中使用它。通过这种方式，我可以在应用程序的不同部分多次使用 item 元素。但是组件没有像页面这样的模块文件。我有一个 components.module 文件，我在其中导入所有组件，然后在 pages 模块文件中使用该文件，然后在 pages 中使用组件。

我已经在 *** 上查看了其他更接近主题的问题，但我没有找到任何解决方案

我的列表组件的代码是：

<ion-list class="element-background">
   <ion-item class="element-background" *ngFor="let item of bills; let i = index"
lines="none">
     <div class="elements-container" (click)="billTapped(item)">
       <ion-icon class="transparent-item-icon" src="./assets/icon/new-icon.svg" ></ion-icon>
 
  <div class="section-text-container">
    <ion-label class="label">
       item.number
    </ion-label>
    <ion-label class="label"> item.expiry</ion-label>
    <ion-label class="label"> item.bill</ion-label>
    </div>
   </div>
  </ion-item>
 </ion-list>

我想将 item 设为单独的组件，如下所示：

 <div class="elements-container" (click)="billTapped(item)">
    <ion-icon class="transparent-item-icon" src="./assets/icon/new-icon.svg" ></ion-icon>
 
    <div class="section-text-container">
      <ion-label class="label">
       item.number
      </ion-label>
      <ion-label class="label"> item.expiry</ion-label>
      <ion-label class="label"> item.bill</ion-label>
    </div>
</div>

然后在列表组件中使用它，但我还没有找到将一个组件导入另一个组件的方法。如果有人知道，请告诉我。谢谢

【参考方案1】：

这与 Angular 无关，与 Ionic 无关。在父组件中使用子组件的选择器。

在子组件 ts 文件中：

@Component(
  selector: 'app-child-component', // <---- This is the selector name
  templateUrl: 'child-component.page.html',
  styleUrls: ['child-component.page.scss'],
)

在父组件 HTML 文件中：

<app-child-component></app-child-component>