代码之家 › 专栏 › 技术社区 › Sampath

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

ionic5 ionic-framework typescript angular

Sampath · 技术社区 · 4 年前

我有两个子组件,如下所示。

子组件1:

子组件2:

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

e、 g.这样好吗?或者我需要有两个完整的组件来处理这类用例?在这里,它似乎与父母紧密相连。i、由于其他地方的破坏等原因,改变一些东西需要做很多工作。我错了吗?

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

0 回复 | 直到 4 年前

WSD 4 年前

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

Mahdi Zarei 4 年前

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前