Question

当我从一个组件路由到另一个组件时，材料输入 无法正确渲染。

但是，如果我只是刷新页面，则所有内容都能完美呈现。 请在下面查看编辑内容

路线没有任何守卫或分解器。

这里提出了一个类似但不完全相同的问题：Angular material 2 - input box not rendering properly as expected

但是似乎没有解决。

REAL,POINTER :: diagonal(:),matrix(:,:),base(:)
...
ALLOCATE(base(n*n))
matrix(1:n,1:n) => base
diagonal => base(::n+1)
!
! DIAGONAL now points to the diagonal elements of MATRIX.
!

从代码的示例部分可以看到，没有ngIf *约束会干扰渲染

我也尝试过采用预加载策略，但这没什么作用

该问题仍然存在于整个应用程序中带有matInput的所有组件中，而不仅仅是此组件。

控制台或终端输出中没有没有错误

编辑：找到了问题的原因，但是没有解决方法：

我深入研究了材料标签并下划线，发现前一个组件（从导航的组件）的样式正在影响当前组件。这不应该发生，因为组件没有亲子关系并完全分开...

角度版本：7.2.4 材质版本：7.3.1

完整的package.json

<div class="all">
   <div class="main">
      <h5 class="head"> Reserve Your Merch </h5>
      <mat-horizontal-stepper [linear]="true" #stepper>
         <mat-step [stepControl]="firstFormGroup">
            <mat-card class="mainDiv">
              <form [formGroup]="firstFormGroup">
                  <ng-template matStepLabel>Order Details</ng-template>
                  <p> <b> Order Details </b> </p>
                  <mat-form-field class="first">
                      <input matInput placeholder="First name" formControlName="name" required>
                  </mat-form-field>
                  <mat-form-field class="second">
                    <input matInput placeholder="Last name" formControlName="last" required>
                    <i matSuffix matTooltip="..." class="material-icons">
                        info
                   </i>
                  </mat-form-field>
                  <br>
                  <mat-form-field class="first">
                      <input matInput placeholder="Email" formControlName="email" required>
                  </mat-form-field>
                  <mat-form-field class="second">
                      <input matInput placeholder="Phone Number" formControlName="phone" required>
                  </mat-form-field>

          <p> <b> Select Pickup Shows </b> </p>

          ....
     </form>
 </mat-card>

感谢您的帮助

Answer 1

尽管这不是一个很好的解决方案，但我确实找到了一些解决方法。

首先，这是Angular中的一个已知问题，但是自2017年5月以来似乎什么都没做。

问题的根源在于 ViewEncapsulation.None 属性将样式泄漏到路由器环境中的其他组件中。了解有关问题here

在这种情况下，“材料表单字段”使用此属性。请参见源代码here。看来材料团队没有采取必要的预防措施来防止样式泄漏。

作为临时解决方案，您可以在组件上强制使用其他封装类型=> https://angular.io/api/core/ViewEncapsulation

但是请注意，这可能会对您的其他样式产生不良影响，因此需要单独进行修复。

不幸的是，另一种解决方法（我最终选择了这种方法）不是混合不同的主题和/或覆盖任何样式。

我已经在材料仓库中打开了另一张票证：https://github.com/angular/material2/issues/15274

从另一个零部件布线时，角材料输入无法正确渲染

1 个答案: