如何解决如何使用 Renderer2 将组件或元素移动到 Angular Material Datepicker Calendar 弹出窗口中?
我正在实施 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);
}
这是我要完成的任务的图片:
如果您取消注释 // this._moveShortcutsListWithDocument();
,您会发现此控制台错误:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。