100％基于组件的Angular / Ionic应用程序开发
萨姆帕斯
我有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>
古兹马诺伊
在这种情况下，您只需要一个组件，一个哑组件。让我们将其命名为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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在本地开发基于Cloudant的应用程序
- 2
使用SMP开发基于用户的应用程序
- 3
如何开发基于数据库方案的应用程序？
- 4
使用 Angular 开发移动 Web 应用程序
- 5
是否有一种方法可以使用不同的环境配置文件进行基于Ionic Framework的Cordova应用程序的开发和生产设置
- 6
IOAuth.IO与Ionic / Angular混合应用程序集成
- 7
Angular Ionic新闻应用程序UI路由
- 8
Office外接程序开发：使用Napa的VSTO或基于Web的应用程序？
- 9
在angular 9应用程序中托管基于照明元素的Web组件的问题
- 10
基于纯PHP CMS或Laravel的CMS用于Web应用程序开发
- 11
开发基于React js的Web应用程序真的需要spring安全吗？
- 12
用于Web应用程序开发的基于纯PHP CMS或Laravel的CMS
- 13
是否可以为Windows窗体制作的软件开发基于WPF的API应用程序？
- 14
需要帮助开发具有可编辑项目列表的基于 XML 文件的 Android 应用程序
- 15
如何开发100％服务器端应用程序？
- 16
我需要Angular CLI来开发Angular应用程序吗？
- 17
在Web应用程序（Angular2）和移动应用程序（Ionic 2）之间共享代码
- 18
部署用yeoman开发的angular.js应用程序的最佳方法？
- 19
部署用yeoman开发的angular.js应用程序的最佳方法？
- 20
从Visual Studio开发angular 2 Web应用程序应该选择什么？
- 21
如何链接rails和angular js以开发单页应用程序
- 22
如何为使用 .netcore 和 angular5 开发的 Web 应用程序添加 docker 支持？
- 23
在开发模式下在 Angular 应用程序和 Access-Control-Allow-Origin 中发送 cookie
- 24
Ionic 4 / Angular 7应用程序*随机*不渲染组件的一部分（Android构建）
- 25
Corova-Angular-Ionic：在引导角度应用程序之前实施装载程序
- 26
使用Ionic或Android进行应用程序开发
- 27
Ionic 3：应用程序组件中的事件不起作用
- 28
确定有关我应基于电子商务域开发Android应用程序使用的技术
- 29
是否有必要使用基于HTTP的客户端/服务器通信进行应用程序开发？
我来说两句