Angular 100%基于组件的角度/离子应用程序开发

我有两个子组件，如下所示

子组件1：

儿童部分2：

您可以看到它的样式、位置等都是相同的。但内容不同。i、 e.图像和文本。所以我想开发一个100%基于组件的离子/角度应用程序。我在这里的问题是，我需要在这里使用两个组件，还是使用同一个带有*ngIf和@Input绑定的组件来根据父页面确定不同的文本和图像

e、 g.这样可以吗？或者我需要为这些类型的用例提供两个完整的组件吗？在这里，它似乎与父母紧密相连。i、 e.由于其他地方的中断等原因，更改某些内容需要大量工作。我在这里错了吗

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

---

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

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

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

constructor(){}
ngOnInit(){}

}

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

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

还有一种不同的技术可以用于重用某些逻辑，但如果需要，可以呈现不同的内容。它被称为内容投影，这里有很好的解释：

---

我将客户机对象作为@Input传递并重用。顺便说一句，[包裹交付成本]是客户对象的字段名吗@我认为你的方法是最好的，因为我不需要在这里使用*ngIf。i、 它是完全动态的。谢谢