问题描述
我正在实施 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 (将#修改为@)