在对话框中使用mat-form-field会打破mat-toolbar

Question

我有一个对话框，终于可以使用最新材料在Angular 7中工作了。我想要一个mat-toolbar作为对话框的标题，然后尝试使用owlDateTime选择器来允许日期范围成为对话框的一部分。如果仅使用标签/输入字段，则垫工具栏将继续正确显示。但是，如果我在输入/标签周围加上mat-form-field以获得漂亮的样式，则工具栏会中断。它不显示传递给组件的title变量，并且样式已损坏。这是使用不太好的日期/时间选择器的工具栏的截图：

这是当我用mat-form-field包装日期/时间选择器字段时的图像。这是html的工作方式：

并且不起作用：

以下是工作工具栏的html：

<mat-toolbar color="primary">
    <h2 mat-dialog-title>{{title}}</h2>
    <span class="flex-spacer"></span>
    <button mat-button mat-dialog-close >&times;</button>

</mat-toolbar>

      <label>Date/Time Range
        <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
               [selectMode]="'range'" style="width: 70%">
        <owl-date-time #dt10></owl-date-time>
      </label>

  <mat-dialog-actions align="center">
    <button class="mat-raised-button"(click)="close()">Close</button>
    <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
  </mat-dialog-actions>

并且表单域有效：

<mat-toolbar color="primary">
    <h2 mat-dialog-title>{{title}}</h2>
    <span class="flex-spacer"></span>
    <button mat-button mat-dialog-close >&times;</button>

</mat-toolbar>

<mat-form-field>

      <label>Date/Time Range
        <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
               [selectMode]="'range'" style="width: 70%">
        <owl-date-time #dt10></owl-date-time>
      </label>
</mat-form-field>

  <mat-dialog-actions align="center">
    <button class="mat-raised-button"(click)="close()">Close</button>
    <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
  </mat-dialog-actions>

为什么mat-form-field会对工具栏产生不利影响？有没有办法让两者很好地玩，还是我必须弄乱CSS来按照我想要的方式来设置输入的样式？

谢谢.....

Answer 1

您应该使用mat-dialog-title和mat-dialog-content组件。请参阅How to detect Safari, Chrome, IE, Firefox and Opera browser?，这将使您正确排队。