Question

我们有一个带有Angular Material的Angular 4应用程序，一旦我们在生产模式下运行网站，它们就会生成不同的HTML。我们使用angular/flex-layout进行布局，使用webpack进行捆绑等。作为本地和prod差异的示例：

本地：

<div class="mat-input-table"> 
<!----> 
<div class="mat-input-infix"> 
   <button type="button" class="mat-datepicker-toggle" aria-label="Open calendar"></button>
          <input formcontrolname="arrivalDate" mdinput="" placeholder="Arrival" aria-expanded="false" aria-haspopup="true" aria-owns="md-datepicker-0" class="mat-input-element ng-pristine ng-valid ng-touched" id="md-input-1">
          <span class="mat-input-placeholder-wrapper"> <!----><label class="mat-input-placeholder mat-float" for="md-input-1">  Arrival <!----> </label> </span> </div> 
<!----> 
</div>

PROD：

    <div class="mat-input-flex">
    <!---->
    <div class="mat-input-infix">
           <button class="mat-datepicker-toggle" type="button" aria-label="Open calendar"></button>
                  <input class="mat-input-element ng-pristine ng-valid ng-touched" formcontrolname="arrivalDate" mdinput="" placeholder="Arrival" aria-expanded="false" aria-haspopup="true" aria-owns="md-datepicker-0" id="md-input-1" aria-invalid="false">
                  <span class="mat-input-placeholder-wrapper"><!----><label class="mat-input-placeholder ng-tns-c14-1 mat-float" for="md-input-1">Arrival 
<!----></label></span></div>
    <!----></div>

请原谅格式，但正如您所看到的，这些块中的顶级div在不同的环境中分配了不同的类。这个类不是我们在HTML中的东西，而是在项目的输出上生成的。任何线索，想法，想法欢迎来到这里，我们真的不熟悉这样的问题。

编辑：生成这些输出的HTML：

<!-- Arrival Date -->
<div fxFlex="100" fxFlex.gt-sm="20" class="form-group datepicker-container gutter-right-gt-sm" [class.has-error]="formErrors.arrivalDate">
       <div fxLayout="row" fxLayoutAlign="center center" class="input-icon-container datepicker">
           <md-input-container>
               <button [mdDatepickerToggle]="arrivalDatepicker"></button>
               <input mdInput 
                      [mdDatepicker]="arrivalDatepicker" 
                      [mdDatepickerFilter]="minArrivalFilter" 
                      formControlName="arrivalDate" 
                      placeholder="Arrival"/>
           </md-input-container>
           <md-datepicker #arrivalDatepicker flex='auto' [touchUi]="false"></md-datepicker>
      </div>
       <span *ngIf="formErrors.arrivalDate">{{formErrors.arrivalDate}}</span></div>

Answer 1

flex-layout是一个响应式temaplate，whish为不同的视口和设备提供不同的样式。这意味着如果您对设置稍有更改，例如兼容模式或不同的浏览器，则类可能会更改。话虽如此，UI行为应该是相同的。

生产中生成的不同div

1 个答案: