Question

我正在使用@ViewChildren and ngAfterViewInit()进行DOM操作。但是我面临一个问题，当UI更改发生页面的重新加载时，我无法进行DOM操作。因为ngAfterViewInit（）仅加载一次。

下面是我用来操作DOM的代码

 @ViewChildren(MatCalendar, {read: ElementRef}) calendars: QueryList<ElementRef>;



 ngAfterViewInit() {
    this.calendars.forEach(calendarEl => {
      const tbody: HTMLElement = calendarEl.nativeElement.querySelector('tbody');
      const tr = (document.createElement('tr') as HTMLTableRowElement);
      tr.className = "date-class"
      for (let i = 0; i < 7; i++) {
        tr.appendChild(document.createElement('td'));
      }
      tbody.appendChild(tr);
    });
  }

默认情况下，我显示的是2019年12月至2020年5月的日历。点击“下一步”时，它将显示下个月的日历，并且在这里我的dom操作没有发生。

以下是我问题的stackblitz链接 https://stackblitz.com/edit/ang-c-p-h4rpvv?file=app/app.component.ts

在加载此链接时，它将在角度日历中显示额外的行，单击按钮“单击下一个/单击上一个”，将删除多余的行。

UI更改后无需重新加载页面

0 个答案: