Angular 从其他零部件布线时角度材质输入未正确渲染

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

但是，如果我只是刷新页面，所有内容都会完美呈现请参见下面的编辑

这些管线没有任何防护装置或分解器

这里提出了一个类似但不完全相同的问题：

然而，它似乎没有得到解决

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

---

感谢您的帮助

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

首先，这是Angular公司的一个已知问题，但自2017年5月以来似乎没有采取任何行动

问题的核心是视图封装。没有任何属性将样式泄漏到路由器环境中的其他组件中。阅读关于这个问题的文章

在本例中，材质窗体字段使用此属性。请参阅源代码。 看起来材料团队没有采取必要的预防措施来防止样式泄漏

作为临时解决方案，您可以在组件上强制使用不同的封装类型=>

但是，请注意，这可能会对您的其他样式产生不必要的副作用，需要单独修复

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

我已在材料回购中开立了单独的票据：

{
  "name": "guilty-gorilla-merch",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "front_end": "ng serve --open",
    "audit": "npm audit"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.4",
    "@angular/cdk": "^7.0.4",
    "@angular/common": "^7.2.4",
    "@angular/compiler": "^7.2.3",
    "@angular/core": "^7.2.4",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "^7.2.4",
    "@angular/http": "^7.2.4",
    "@angular/material": "^7.3.1",
    "@angular/platform-browser": "^7.2.4",
    "@angular/platform-browser-dynamic": "^7.2.4",
    "@angular/router": "^7.2.4",
    "@ng-bootstrap/ng-bootstrap": "^4.0.1",
    "@ng-select/ng-select": "^2.3.2",
    "@ngu/carousel": "^1.4.8",
    "angular-bootstrap-md": "^6.1.1",
    "angular-font-awesome": "^3.1.2",
    "angular2-click-outside": "^0.1.0",
    "bootstrap": "^4.1.1",
    "chart.js": "^2.7.2",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "ng-sticky": "^0.1.5",
    "ng2-sticky-nav": "^0.1.0",
    "ng4-click-outside": "^1.0.1",
    "ngx-drag-scroll": "^1.8.2",
    "ngx-slick": "^0.1.3",
    "rxjs": "^6.3.3",
    "slick-carousel": "^1.8.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.1",
    "@angular/cli": "~7.3.0",
    "@angular/compiler-cli": "^7.2.3",
    "@angular/language-service": "^7.0.0",
    "@types/jasmine": "~2.8.9",
    "@types/jasminewd2": "~2.0.5",
    "@types/jquery": "^3.3.11",
    "@types/node": "^10.11.4",
    "codelyzer": "^4.5.0",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^1.1.0",
    "protractor": "^5.4.0",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}