如何在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文档中弄清楚这一点，但似乎没有这方面的例子。

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（不要忘记将#fc添加到HTML中的p-schedule）：

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

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

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

见Plunker