使用锚点显示MatCalendar

Question

如何使用锚元素打开“材料日历”组件？ 我差不多做了，但是日历总是在页面的左上角打开：

    <li>
      <mat-calendar class="hidden">
        <input matInput [matDatepicker]="picker" />
        <mat-datepicker #picker></mat-datepicker>
      </mat-calendar>
      <a (click)="picker.open()">
          <i class="zmdi zmdi-calendar"></i>
      </a>
    </li>

Answer 1

头痛之后，我找到了解决方案：

    <li>
      <div class="hidden-control">
        <mat-form-field>
          <input matInput [matDatepicker]="picker" (dateChange)="scheduleDateChange($event)" />
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
      </div>
      <a (click)="picker.open()">
          <i class="zmdi zmdi-calendar text-white"></i>
      </a>
    </li>

隐藏控件类如下：

.hidden-control  {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  visibility: hidden;
}

结果：