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

Question

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

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

我的列表组件的代码是：

<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>

我想把项目做成单独的组件，像这样：

 <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>

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

Answer 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>

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

How to use one component inside another component in ionic?

ionic-framework

angular

ionic4