我目前在我的项目中使用角度日历并对其进行了相当多的定制。自定义是通过使用完成的<ng-template>
,我目前将它们全部放在同一个文件中,这已经失控了。
这是一个简化版本:
app.component.html
<!-- Load this from a separate file -->
<ng-template
#currentTimeMarkerTemplate
let-columnDate="columnDate"
let-dayStartHour="dayStartHour"
let-dayStartMinute="dayStartMinute"
let-dayEndHour="dayEndHour"
let-dayEndMinute="dayEndMinute"
let-isVisible="isVisible"
let-topPx="topPx"
>
<div
class="cal-current-time-marker"
*ngIf="isVisible && showMarker"
[style.top.px]="topPx"
></div>
</ng-template>
<!-- Load this from a separate file -->
<!-- Use the reference of the above template -->
<mwl-calendar-week-view
[currentTimeMarkerTemplate]="currentTimeMarkerTemplate"
[viewDate]="viewDate"
[dayStartHour]="dayStartHour"
[dayEndHour]="dayEndHour"
>
</mwl-calendar-week-view>
我尝试在其中创建app-my-template.component.html
并移动<ng-template>
标签,然后app.component.html
进行如下编辑:
<app-my-template #external_template></app-my-template>
<mwl-calendar-week-view
[currentTimeMarkerTemplate]="external_template"
[viewDate]="viewDate"
[dayStartHour]="dayStartHour"
[dayEndHour]="dayEndHour"
>
</mwl-calendar-week-view>
但我收到以下错误:
“类型‘MyTemplate’缺少‘TemplateRef’类型的以下属性:elementRef、createEmbeddedView”
我也尝试了这个 stackoverflow response,但是该<ng-template>
部分保留在组件之外,这在我的情况下不起作用,因为我有一堆与ng-template
自身相关的变量。
至于我的问题,如何ng-template
从另一个文件加载包含标签本身的全部内容?谢谢你。