angular - 如何使用 Renderer2 将组件或元素移动到 Angular Material Datepicker Calendar 弹出窗口中？

Question

我正在实现 Angular Material Date Rage Picker，并希望将一个组件或元素插入到日历弹出窗口中。目前，我可以通过直接 DOM 操作来做到这一点。我想知道如何使用 Renderer2 或其他不直接操作 DOM 的工具来完成此操作。

在代码中，我等待从mat-date-range-picker元素“打开”的事件。当它执行时，我运行这个函数：

calendarOpen() {
    // todo: not working
    this._moveShortcutsListWithRender2();

    // this is working
    // this._moveShortcutsListWithDocument();
  }

  private _moveShortcutsListWithRender2() {
    const matDatepickerPopup = this._renderer2.selectRootElement(
      'mat-datepicker-content'
    )[0];
    const matCalendar = this._renderer2.selectRootElement('mat-calendar')[0];
    this._renderer2.insertBefore(
      matDatepickerPopup,
      this.shortcutsList,
      matCalendar
    );
  }

  private _moveShortcutsListWithDocument() {
    const calendar = document.getElementsByClassName(
      'mat-datepicker-content'
    )[0];
    const shortcutList = document.createElement('ul');
    shortcutList.classList.add('date-picker-calendar-shortcuts-list');
    calendar.appendChild(shortcutList);

    if (this.shortcuts) {
      this.shortcuts.forEach((shortcut, index) => {
        let listItem = document.createElement('li');
        listItem.setAttribute('id', `listItem${index}`);
        shortcutList.appendChild(listItem);
        const listItemElement = document.getElementById(`listItem${index}`);
        if (!!listItemElement && !!shortcut.label) {
          listItemElement.innerText = shortcut.label;
        }
      });
    }
    calendar.appendChild(shortcutList);
  }

这是我要完成的工作的图片：

在这里你可以找到我放在一起的代码=

https://stackblitz.com/edit/angular-hdrguh-frwr45?file=src/app/date-range-picker-selection-strategy-example.html

如果取消注释// this._moveShortcutsListWithDocument();，您会发现此控制台错误：

标签： angularangular-materialmaterial-uirendererangular-renderer2