Angular 10 : Date range picker - calender opens at wrong place

Question

我想使用新的 Angular 10 中的日期选择器 .
我成功地将 Angular 升级到 Angular 10。
然后我从第一个示例中复制了 html 代码 here .
它应该看起来像这样，日历弹出很好地放置:

(当您点击示例链接时，可能需要向上滚动才能找到第一个示例。如果您点击右侧<>，您可以看到示例背后的代码。)
我将示例中的 html 代码复制到我的一个组件中，现在看起来像这样(在 Chrome 和 Firefox 中尝试过):

黑条是我页面的侧边栏，因此与 dat-picker 无关。但当然，弹出窗口应该更靠右更靠下。而且它看起来与示例非常不同。
在示例中，他们没有使用任何额外的 CSS，为什么我的弹出窗口看起来如此不同？为什么它总是被放置得如此糟糕，我可以改变它吗？
基本功能正在运行，您可以选择一个日期。但它看起来很糟糕。
我删除了所有的 CSS 和 Bootstrap 以及其他样式表链接，但它看起来更糟:

现在日历弹出窗口的位置更差，两者之间有很大的差距。
但正如我所说，在示例中使用 html 代码就足够了，不需要 css。我究竟做错了什么？
这是我复制的示例中的 html 代码:

<mat-form-field appearance="fill">
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

这是示例中的 typescript 代码(我没有更改组件的 ts 代码，因为我看不到这里有什么特别之处:)

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

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {}

另外，为了让它在我的页面上运行，我必须安装 @angular/cdk和 @angular/material然后将很多东西导入我的 app.module.ts文件。不知道这样正常吗？如果没有这些导入，它甚至不会启动，因为 datepicker html 代码会抛出很多错误。

import {A11yModule} from '@angular/cdk/a11y';
import {ClipboardModule} from '@angular/cdk/clipboard';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {MatBadgeModule} from '@angular/material/badge';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatCardModule} from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatChipsModule} from '@angular/material/chips';
import {MatStepperModule} from '@angular/material/stepper';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatListModule} from '@angular/material/list';
import {MatMenuModule} from '@angular/material/menu';
import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatSliderModule} from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatSortModule} from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table';
import {MatTabsModule} from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatTreeModule} from '@angular/material/tree';

HttpClientModule
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
A11yModule,
ClipboardModule,
CdkStepperModule,
CdkTableModule,
CdkTreeModule,
DragDropModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
PortalModule,
ScrollingModule
]

在我找到第一个示例的教程页面中，没有关于这些必要导入的内容。我只找到了 here in this stackblitz example .
为什么所有这些导入，我是否正确导入它们？
抱歉，顺便问了这么长的问题!

Answer 1

解决您的问题的两件事:

正如你已经提到的，@angular/material需要添加以使用 Angular Material 中的所有组件并添加默认样式。

这些是 material-module.ts 中唯一的导入您的日期范围选择器所需的:

import {NgModule} from '@angular/core';
import {MatInputModule} from '@angular/material/input';
import {MatDatepickerModule} from '@angular/material/datepicker';

@NgModule({
  exports: [
    MatDatepickerModule,
    MatInputModule
  ]
})
export class DemoMaterialModule {}

这是因为日期范围包含在 mat-form-field 中。输入，因此您需要导入此特定模块。其余的导入仅用于演示目的，您的案例不需要。 See this updated StackBlitz使用更新的 Material 模块。