时间戳

首页 > 解决方案 > Angular6 Material Datepicker向模板添加内容

angular - Angular6 Material Datepicker向模板添加内容

问题描述

我想知道如何实现它。我已经找到

在这里我通过修改组件而不是扩展它找到了它应该如何完成，但我真的无法在代码中找到如何做到这一点。更多信息会很棒。如何扩展或修改 mat-calendar 的模板？在 mat-calendar 代码中我找不到模板。

在第二种情况下，我找到了如何在此处添加按钮2，但我遇到了同样的问题，不知道该怎么做，有人可以提供任何我可以看到如何实现它的例子。

标签： angulardatepickercalendarangular-material

解决方案

这是一种丑陋的做法，但它展示了如何通过操作文档对象来完成任务。

  • 我尝试通过 @ViewChild 并尝试 getConnectedOverlayOrigin 方法，但我无法弄清楚。
  • 这是我能够在 DOM 中操作日历内容的唯一方法。
  • 希望有人会发布一种原生的 Angular/Material 方式来做到这一点，我想知道个人如何。

使用 Opened 事件：

<mat-datepicker (opened)="opened()" #picker></mat-datepicker>

组件方法：

 opened() {
    var btn = document.createElement("button");
    btn.onclick = function () {
      alert("blabla");
    };
    var t = document.createTextNode("Click Me");
    btn.appendChild(t);
    var div = document.createElement("div");
    div.appendChild(btn);

    setTimeout(() => {
      var element = document.getElementsByTagName('mat-datepicker-content');
      element[0].appendChild(btn);
    })
  }

推荐阅读