如何在 Angular 4/5 中动态添加 NG Prime 计划（日历）组件

Question

在我的工作中，我有一个任务，我必须将许多 NG Prime-calendars 添加到网页中，并且需要在它们之间交换信息。在这种情况下，仅以典型方式添加组件似乎是不够的，即：

<p-schedule id="cal1" [events]="events" [header]="headerConfig" [height]="700" [styleClass]="'schedule-width'"></p-schedule>
<p-schedule id="cal2" [events]="events2" [header]="headerConfig2" [height]="700" [styleClass]="'schedule-width'"></p-schedule> 

.. 等等

我还需要能够动态地循环遍历它们并通过 id 单独捕获它们并通过代码操作它们。有谁知道如何将此日历组件转换为变量和/或通过 Angular 4/5 中的代码动态创建日历组件？我试图从 api-documentation 中弄清楚这一点，但似乎没有这样的例子。

Answer 1

首先，创建一组计划事件和配置。让我们将此数组命名为schedules。它将包含与您想要的日历一样多的项目，每个项目将是一个由事件和 headerConfig 组成的对象。

this.schedules = [
    { 
      // first calendar
      events: [
        {
            "title": "All Day Event",
            "start": "2018-03-01"
        },
        {
            "title": "Long Event",
            "start": "2018-03-07",
            "end": "2018-03-10"
        }
      ],
      headerConfig: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          }
    },
    // second calendar
    // ...
  } 
]

然后，在您的 HTML 组件中，像这样循环这个 schedules 数组：

<div *ngFor="let schedule of schedules;let i = index">
  <p-schedule #fc id="cal{{i}}" [events]="schedule.events" [header]="schedule.headerConfig" [height]="700" [styleClass]="'schedule-width'"></p-schedule><br/>
</div>

---

编辑：

要在 TS 代码中访问您的日历，您可以使用 ViewChildren decorator（不要忘记在 HTML 中将 #fc 添加到您的 p-schedule）：

@ViewChildren("fc") fcs: QueryList<any>;

然后，您可以像这样更新所有日历的视图（例如）：

    this.fcs.forEach(fc => {
      fc.changeView('agendaDay');
    });

见Plunker