Angular6 Material Datepicker добавить содержимое в шаблон - PullRequest
Новая
       18

Angular6 Material Datepicker добавить содержимое в шаблон

0 голосов
/ 25 октября 2018

Я хотел бы знать, как этого добиться.Я нашел

Здесь Я нашел, как это должно быть сделано, изменив компонент, не расширяя его, но я действительно не могу найти, как это сделать в коде.Больше информации было бы здорово.Как я могу расширить или изменить шаблон mat-calendar?Внутри кода календаря я не могу найти шаблон.

И во втором случае я нашел, как добавить кнопку here2 , но у меня та же проблема, не знаюкак это сделать, может кто-нибудь привести пример, где я могу увидеть, как этого добиться.

1 Ответ

0 голосов
/ 25 октября 2018

Это ужасный способ сделать это, но он показывает, как выполнить задачу, манипулируя объектом документа.

  • Я попытался с помощью @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);
    })
  }
...