【问题标题】:ionic 2 template reuseionic 2 模板重用
【发布时间】:2017-07-21 18:08:58
【问题描述】:
我想要一个可以在多个页面上重复使用的“模板”,基本上每个将使用此 html 模板的页面都会将对象与数据一起传递,并且模板将根据传入的对象呈现。
场景
我有 4 个选项卡,选项卡 1 和选项卡 2 页面有一个名为“事件”的部分,每个事件模板的数据都不同,但它具有相同的 html 结构,唯一的区别是我传递具有不同数据的事件对象。
只需要知道我将“事件”模板 html 放在哪里以及如何将其添加到这两个页面并在渲染时传递数据对象。
【问题讨论】:
标签:
angular
ionic-framework
【解决方案1】:
组件可以共享一个模板,只需在组件装饰器中输入路径即可。
例如
//page 1
@Component({
templateUrl: "path/to/template"
})
//page 2
@Component({
templateUrl: "path/to/template"
})
在您描述的场景中,听起来您只需要一些组件。
我会生成一个名为 events 的组件和一个名为 event 的组件
$ ionic g component events
$ ionic g component event
在每个选项卡(有一个事件部分)中添加您的 <events [yourEventsArray]></events> 组件。并在事件组件中添加<event *ngfor="let event of events" [event]="event"></event> 组件