Angular6 Material Datepicker向模板添加内容

Question

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

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

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

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);
    })
  }