100% 基于组件 Angular/Ionic 应用程序开发

Question

我有 2 个 child 组件，如下所示。

Child 组件 1:

Child 分量 2:

可以看到它的样式、位置等都是一样的。但内容不同。即图像和文字。所以我想开发一个 100% 基于组件的 Ionic/Angular 应用程序。我的问题是我需要在这里使用 2 个组件还是使用具有 *ngIf 和 @Input() 绑定的相同组件来根据 parent 页面确定不同的文本和图像？

例如这很好，还是我需要为这些用例准备 2 个完整的组件？在这里它似乎与 parent 紧密耦合。即由于其他地方的破坏等原因，改变一些东西需要大量的工作。我在这里错了吗？

<ion-grid>
  <ion-row>
    <ion-col size="12" class="ion-text-center padding-bottom-0">
      <h5 class="font-bold margin-top-bottom-5">{{'Client.Parcel-Delivery-Cost' | translate}}</h5>
    </ion-col>

    <ion-col size="12" class="padding-top-bottom-0 ion-text-center" *ngIf="isPickUp">
      <div>{{'Client.Parcel-Picked-Up-From-The-Location-And-Delivered-To-You' | translate}}</div>
    </ion-col>

    <ion-col size="12" class="padding-top-bottom-0 ion-text-center" *ngIf="!isPickUp">
      <div>{{'Client.Parcel-Picked-Up-And-Handed-Over-To-Respective-Courier' | translate}}</div>
    </ion-col>

    <ion-col size="12" class="padding-top-bottom-0 ion-text-center font-bold">
      <h4 class="margin-top-5 font-bold"> {{parcelDeliveryCost}}</h4>
    </ion-col>
  </ion-row>
</ion-grid>

Answer 1

angular是一个基于组件的框架。所以通常当你可以避免重写代码时，你最好这样做。特别是在这种情况下。它们的布局完全相同。

Answer 2

在这种特殊情况下，您只需要一个组件，一个哑组件。让我们将其命名为 StepComponent

export class StepComponent implements OnInit {
@Input() details: DetailData;

constructor(){}
ngOnInit(){}

}

然后在模板中，您应该访问 details 属性并呈现数据。 DetailData 类型只是一个模型，用于保存所有详细信息属性（例如名称、描述、图像）。

<h4>{{details.name}}</h4>
<p{{details.description}}</p>

还有一种不同的技术可用于重用某些逻辑，但在需要时呈现不同的内容。它被称为内容投影，这里有很好的解释： https://www.prestonlamb.com/blog/content-projection-in-angular

100% 基于组件 Angular/Ionic 应用程序开发

100% component based Angular/Ionic app development

angular

typescript

ionic-framework

ionic5