0

我目前在我的项目中使用角度日历并对其进行了相当多的定制。自定义是通过使用完成的<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从另一个文件加载包含标签本身的全部内容?谢谢你。

4

0 回答 0