1

所以我正在使用角度日历，当我按下按钮时我有一个对话框，现在我将一个随机事件对象添加到我的日历服务事件数组中以进行测试：

 onButtonClick() {
      var date = addHours(new Date(), 2)
      this.calendarService.onCreateEvent('test added',date )
      console.log(date)
    }

它将它添加到我的注入服务中：

export class CalendarService {
  events: CalendarEvent[] = [
    { title: "my test event 1", start: new Date() },
    { title: "my test event 2", start: addDays(new Date(), 1) }
  ];

现在我使用 ngOnit 在组件中设置本地事件数组：

export class ScheduleCalendarComponent implements OnInit{
  constructor(
    private calendarService: CalendarService,
    public dialog: MatDialog
  ) {}

  view: string = "month";

  viewDate: Date = new Date();

  events: CalendarEvent[] = [];

  refresh: Subject<any> = new Subject();

  ngOnInit(): void {
    this.events = this.calendarService.events;
  }

所以现在它会提取正确的事件，但是当我添加一个事件时它不会更新 DOM，因为我只更新数组 OnInit 所以只有在更改页面并返回之后，如果我更改更新方法，使用 calendarservice 事件数组它可以工作：

  onCreateEvent(title: string, start: any) {
    this.events = [...this.events, {title: title, start: start}]
  }

我使用它并将其添加到日历中，如下所示：

 <mwl-calendar-day-view
    *ngSwitchCase="'day'"
    [viewDate]="viewDate"
    [events]="this.calendarService.events"
    (hourSegmentClicked)="openDialog()"
  >
  </mwl-calendar-day-view>

但是我将如何使用组件自己的数组而不是服务数组来做到这一点？让组件像 max 那样使用自己的数组比直接从服务中获取更好的做法吗？

我想使用组件数组来做到这一点，但它不会在按钮单击时更新：

 <mwl-calendar-day-view
    *ngSwitchCase="'day'"
    [viewDate]="viewDate"
    [events]="events"
    (hourSegmentClicked)="openDialog()"
  >
  </mwl-calendar-day-view>

希望这是有道理的

谢谢！

4

1 回答 1

0

它的发生是因为有不同的changeDetectionStrategy而你看到的那个changeDetectionStrategy.onPush在@Component

changeDetection: ChangeDetectionStrategy.OnPush

你为什么不使用创建一个新的数组副本

ngOnInit(): void {
  this.events = [...this.calendarService.events];
}

或者

ngOnInit(): void {
  this.events = JSON.parse(JSON.stringify(this.calendarService.events));
}

然后你不会修改服务数组events并且可以轻松使用：

onCreateEvent(title: string, start: any) {
 this.events = [...this.events, {title: title, start: start}]
}
于 2019-03-08T03:36:58.777 回答