角度4材质DatePicker未在正确位置打开

Question

我在我的应用中使用Material Datepicker组件（2.0.0-beta.6）。我可以正确添加它，但每当我打开它时，它会在页面的左上角打开。理想情况下，它应该在datepicker组件旁边打开。

请参阅以下代码。

Demo.html

    <div class="col col-2 col-spacing">
        <md-input-container>
          <input mdInput [mdDatepicker]="endDatepicker" placeholder="End Date:">
          <button mdSuffix [mdDatepickerToggle]="endDatepicker"></button>
        </md-input-container>
        <md-datepicker #endDatepicker></md-datepicker>
      </div>
    </div>

DemoModule.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { DemoComponent} from './demo.component';
import { MaterialModule, MdNativeDateModule } from '@angular/material';

@NgModule({
  declarations: [DemoComponent],
  imports: [
    BrowserAnimationsModule,
    MaterialModule,
    MdNativeDateModule,
  ],
  bootstrap: [DemoComponent]
})
export class AppModule { }

DemoComponent.ts

import { Component } from '@angular/core';


@Component({
     selector: 'sbom-search-panel',
     templateUrl: './demo.component.html',
})

export class DemoComponent {}

请参阅截图。

我们将不胜感激。

Answer 1

尝试将[touchUi]="true"放在标记md-datepicker上。它应该工作！

Answer 2

  

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

  

app.component.html

<md-input-container>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

  

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import 'hammerjs';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdDatepickerModule, MdNativeDateModule, MdInputModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MdInputModule,
    /*Datepickar */
    MdDatepickerModule,
    MdNativeDateModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  

<强>演示

here