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

【问题标题】：100% component based Angular/Ionic app development100% 基于组件的 Angular/Ionic 应用程序开发
【发布时间】：2020-09-25 01:25:33
【问题描述】：

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

子组件 1：

子组件 2：

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

例如这很好还是我需要为这些用例提供 2 个完整的组件？在这里，它似乎与父母紧密相连。即由于其他地方的损坏等，更改某些内容需要大量工作。我在这里错了吗？

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

【问题讨论】：

我将客户端对象作为@Input 传递并重用。顺便说一句，[Parcel-Delivery-Cost] 是客户端对象的字段名称吗..？
@ihorbond 是子组件的属性。

标签： angular typescript ionic-framework ionic5

【解决方案1】：

在这种特殊情况下，您只需要一个组件，一个哑组件。让我们将其命名为 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

【讨论】：

我认为你的方法是最好的，因为我不需要在这里使用*ngIf。即它是完全动态的。谢谢！

【解决方案2】：

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

【讨论】：