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

Angular6 Material Datepicker将内容添加到模板

1 个答案: