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

时间:2018-03-09 17:21:27

标签: angular primeng

在我的工作中,我有一项任务,我必须在网页中添加许多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文档中解决这个问题,但似乎没有这方面的例子。

1 个答案:

答案 0 :(得分:0)

首先,创建一个计划事件和配置数组。我们将这个数组命名为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