【问题标题】:Angular6 Material Datepicker add content to the templateAngular6 Material Datepicker向模板添加内容
【发布时间】:2018-10-25 10:57:54
【问题描述】:

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

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

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

【问题讨论】:

    标签: angular datepicker calendar angular-material


    【解决方案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);
        })
      }
    

    【讨论】:

    • 谢谢 Marshal,如果它符合我的需要,我会按照你的方式尝试。很高兴知道一种更本土的方式
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-08
    • 2020-08-24
    • 2019-07-26
    • 2021-04-22
    相关资源
    最近更新 更多