生產中生成的不同div

我們擁有一個Angular 4的應用程序，當我們在生產模式下運行網站時，似乎有不同的HTML生成。我們使用angular/flex-layout佈局，以及爲的WebPack本地捆綁等方面的差異的一個例子，PROD：生產中生成的不同div

地方：

<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>

來源

2017-06-23 LeteciTanjir

請向我們展示生成此html的模板代碼 –

添加了模板HTML。 – LeteciTanjir

柔性佈局是一個響應temaplate，嘩嘩具有用於不同的視口和設備不同的風格。這意味着如果您的設置稍有變化，例如兼容模式或不同的瀏覽器，這些類可能會改變。這就是說，用戶界面的行爲應該是一樣的。

來源

2017-06-23 12:48:20

但是，這是相同的瀏覽器，相同的大小，一切都相同，但生成了不同的類。我無法在'mat-input-table'和'mat-input-flex'上找到很多文檔，因此很難診斷兩者之間的切換。 – LeteciTanjir

生產中生成的不同div

回答

相關問題