Angular6 Material Datepicker 向模板添加内容

Question

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

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

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

Answer 1

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

• 我尝试通过 @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);
    })
  }