角度10：日期范围选择器-日历在错误的位置打开

Question

我想在Angular 10中使用新的日期选择器。

我成功将Angular升级到Angular 10。 然后，我从第一个示例here复制了html代码。

它应该看起来像这样，压光机弹出位置很好：

（当您单击示例的链接时，也许您需要向上滚动才能找到第一个示例。如果单击右侧的<>，您将看到示例后面的代码。）

我将示例中的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>

这是示例中的打字稿代码（我没有更改组件的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

有两件事可以解决您的问题：

1. 您已经提到过，需要添加@angular/material才能利用Angular Material中的所有组件并添加默认样式。
2. 这些是日期范围选择器在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和更新的“材料”模块。

Answer 2

好的，我应该先阅读Angular Material getting started guide：D 我尝试按照他们页面上的示例进行操作，因此运行了命令：

ng add @angular/material

这是丢失的东西，现在看起来应该是：

编辑：我已经解决了最初的问题，但是我仍然想知道所有这些重要因素吗？对此有任何评论。