Angular 密码强度扩展颜色不起作用答案

【问题标题】：Angular Password Strength Extension Color does not workAngular 密码强度扩展颜色不起作用
【发布时间】：2021-03-12 15:12:49
【问题描述】：

我使用扩展名@angular-material-extensions/password-strength 并且只是从这里复制了展示示例https://angular-material-extensions.github.io/password-strength/home

不知何故，原色永远不会出现。只出现蓝色和红色。我还必须添加一个

ngAfterViewChecked() {
    this.cdRef.detectChanges();
 }

修复颜色Expression has changed after it was checked...的错误

颜色确实会变成粉红色，当它 100% 选中时只是蓝色，但我当然希望它是绿色的。

我的组件.html：

    <tr>
      <td>
          <mat-card-subtitle>
              <mat-slide-toggle [(ngModel)]="showDetails" [ngModelOptions]="{standalone: true}">Show Password Requirements</mat-slide-toggle>
            </mat-card-subtitle>
        <mat-form-field appearance="outline" class="example-full-width" [color]="passwordComponent.color">
          <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
          <input matInput [type]="toggle.type" required placeholder="Password" #password formControlName="password"
            type="password" />
            <mat-hint align="end" aria-live="polite">
                {{password.value.length}} / 25
              </mat-hint>
          <mat-error *ngIf="formErrors.password" class="form__error">{{ formErrors.password }} </mat-error>
        </mat-form-field>
        <mat-password-strength #passwordComponent min="4" [password]="password.value">
      </mat-password-strength>

      <mat-password-strength-info
        *ngIf="showDetails"
        [passwordComponent]="passwordComponent">
      </mat-password-strength-info>
      </td>
    </tr>
    <tr>
    <tr>
      <td>
        <mat-form-field class="example-full-width">
          <input matInput required placeholder="Password Confirmation" compare="password"
            name="passwordConfirmation" formControlName="passwordConfirmation" type="password" />
          <mat-error *ngIf="formErrors.passwordConfirmation" class="form__error">
            {{ formErrors.passwordConfirmation }} </mat-error>
        </mat-form-field>
      </td>
    </tr>

编辑：我还发现，如果我添加选项 floatLabel="always"，<mat-form-field> 会忽略它，因为自动功能本身不适用于该字段。

【问题讨论】：

标签： angular

【解决方案1】：

这与你的主题有关。

更准确地说，.mat-progress-bar-fill::after 应该寻找什么：像这样的东西应该适合你：

mat-password-strength .mat-progress-bar-fill::after{
    background-color: #4caf50;
}

在此处查看实时示例：

https://stackblitz.com/edit/angular-material-password-stack-55569467?file=styles.css

【讨论】：

很糟糕，它对我不起作用。但这是一个很好的主题提示。我不记得激活了任何自定义主题。如果激活了主题，我在哪里可以找到或查看它？
您的样式中应该有类似：@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; 的内容。（在我的示例中：styles.css）。你能举一个你在 stackblitz 中遇到的问题的例子吗？
我找到了，但它是标准主题 @import "~@angular/material/prebuilt-themes/indigo-pink.css"; @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 没有它，它看起来什么都不是……
好吧，我明白你的意思了。我把它改成了@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';，现在进度条有红色、黄色和紫色，即使是css也不是绿色。奇怪...
如果绿色没有出现，那是因为你的类是在css中的导入之前声明的，你必须将它移到之后或将其更改为：mat-password-strength .mat-progress-bar-fill::after，将更新答案

【解决方案2】：

我遇到了同样的问题，这确实是我的主题的问题（强调色白色）我设法通过将 css 放在 style.css 中来解决它

   .mat-progress-bar.mat-warn .mat-progress-bar-buffer {
    background-color: #ffccbc;
}

.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {
    background-color: red !important; 
}

.mat-progress-bar.mat-accent .mat-progress-bar-buffer {
    background-color: lightgoldenrodyellow !important; 
}

.mat-progress-bar.mat-accent .mat-progress-bar-fill::after{
    background-color: yellow !important; 
}

.mat-progress-bar.mat-primary .mat-progress-bar-buffer {
    background-color: lightgreen !important; 
}

.mat-progress-bar.mat-primary .mat-progress-bar-fill::after{
    background-color: green !important; 
}

【讨论】：

【解决方案3】：

插件会根据主题的 .mat-warn、.mat-accent 和原色调整颜色。分别用于弱密码、中密码和强密码。

要为各种阈值覆盖主题的颜色，请在组件的样式中添加以下内容：

      mat-password-strength
        .mat-progress-bar.mat-warn
        .mat-progress-bar-fill::after {
        background-color: #f44336;
      }
      mat-password-strength
        .mat-progress-bar.mat-accent
        .mat-progress-bar-fill::after {
        background-color: #039be5;
      }
      mat-password-strength .mat-progress-bar-fill::after {
        background-color: #64dd17;
      }

【讨论】：