首页 / 技术问答 / Typescript问答列表 / 问答详情

Typescript 在实现自定义主题后，Angular 不会更新视图

我是Anluar和前端开发的新手，但我正在做一个相当大的项目，就在最近，我不得不在其中实现自定义主题，问题是在我完成之后，它在你更改*ngIf个值后停止更新HTML.

我怀疑我实现自定义主题的方式可能与此有关，所以我将开始分享这部分代码: styles.scss

/* You can add global styles to this file, and also import other style files */
@import 'Custom-theme.scss';

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

Custom-theme.scss

@use '@angular/material' as mat;
@include mat.core();

$light-primary: mat.define-palette(mat.$blue-palette);
$light-accent: mat.define-palette(mat.$indigo-palette);
$light-warn: mat.define-palette(mat.$red-palette);

$light-theme: mat.define-light-theme((color:(primary: $light-primary,
                accent: $light-accent,
                warn: $light-warn )));

@include mat.all-component-themes($light-theme);

.dark-theme {
    $dark-primary: mat.define-palette(mat.$deep-orange-palette);
    $dark-accent: mat.define-palette(mat.$amber-palette);
    $dark-warn: mat.define-palette(mat.$red-palette);

    $dark-theme: mat.define-dark-theme((color:(primary: $dark-primary,
                    accent: $dark-accent,
                    warn: $dark-warn )));

    @include mat.all-component-colors($dark-theme);
}

.light-background {
    background-color: rgba(0, 0, 0, 0.02);
}

.dark-background {
    background-color: #303030;
}

这就是我改变主题的方式: header.component.ts:

constructor(
    public cookieService: CookieService,
    public dialog: MatDialog,
    public router: Router,
    public translateService: TranslateService,
    private responsive: BreakpointObserver,
    private render: Renderer2,
    @Inject(DOCUMENT) private document: Document,
    media: MediaMatcher,
  ) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this.langs = this.translateService.getLangs();
    this.selectedLang = this.translateService.currentLang;
    this.userId = cookieService.get('UserId');
  }

  ngOnInit() {
    this.responsive.observe(['(min-width: 1022px)'])
      .subscribe(result => {
        this.isMobile = result.matches;
      });
  }

  changedTheme(): void {
    this.render.removeClass(this.document.body, 'light-theme');
    this.render.removeClass(this.document.body, 'dark-theme');
    this.render.removeClass(this.document.body, 'light-background');
    this.render.removeClass(this.document.body, 'dark-background');
    this.render.addClass(this.document.body, this.selectedTheme.toLowerCase() + '-theme');
    this.render.addClass(this.document.body, this.selectedTheme.toLowerCase() + '-background');
  }

函数changedTheme在另外两个组件app.component.ts和settings.component.ts中使用(实际上是复制和粘贴)，因为我还需要管理这两个组件上的主题.

我在想，是否有可能"发出"一个事件来改变主题，但我不确定这是不是糟糕的做法，这不是这个问题的主要目的. 然而，在这方面我需要一些帮助.我没有任何其他专门更改或手动更新视图的代码.

PS:我不得不把.light-background和dark-background类放在一起，因为主题不会因为某种原因改变背景

Update个

好的，在我编写主题之前，我使用了Git并返回，问题仍然存在.重新启动了计算机，重新下载了node_modules，并在多个浏览器中进行了测试，即使没有主题问题仍然存在.现在我真的不知道该怎么办.唯一的区别是，它go 掉了@angular/flex-layout，但即使我强迫它保留它，这个问题仍然存在.我应该在哪里调试这种问题？

Update 2个

几乎一整天的工作调试提交后，提交一次又一次，我做到了.问题不是主题，而是我的header.html组件.我不得不对它做了一些技巧，以使其响应移动和桌面，他们有不同的界面，原因是有些东西坏了.不知道为什么或者怎么的，但是找到另一种方法来做响应部分比解决我制造的这个问题更容易. 以下是破解的代码:

<div style="display: contents;">
  <mat-toolbar color="primary" class="header-top">
    <div style="display: contents;" *ngIf="!isMobile">
      <button mat-icon-button (click)="snav.toggle()" class="icon-button">
        <img class="icon" src="../assets/imgs/1315254.png" alt="profile" />
      </button>

      <span class="toolbar-text" (click)="goToPage('home')">{{ cookieService.get('Username') }}</span>

      <button mat-icon-button (click)="goToPage('access')" *ngIf="!userId">
        <mat-icon>manage_accounts</mat-icon>
      </button>
    </div>

    <div style="display: contents;" *ngIf="isMobile">
      <span class="toolbar-text" (click)="goToPage('home')">FindME!</span>
      <span class="spacer"></span>

      <mat-form-field style="margin-top: 20px;" *ngIf="isDevMode()">
        <mat-select [(value)]="selectedLang" (valueChange)="changedLanguage()" id="lang-select">
          <mat-option *ngFor="let lang of langs" [value]="lang">
            {{ lang.split('-')[0].toUpperCase() }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <button mat-icon-button (click)="goToPage('access')" *ngIf="!userId">
        <mat-icon>manage_accounts</mat-icon>
      </button>
      <button mat-icon-button [matMenuTriggerFor]="notifications" *ngIf="userId">
        <mat-icon>notifications</mat-icon>
      </button>
      <button mat-icon-button [matMenuTriggerFor]="chat" *ngIf="userId">
        <mat-icon>chat</mat-icon>
      </button>
      <button mat-icon-button class="icon-button" [matMenuTriggerFor]="menu" *ngIf="userId">
        <img class="icon" src="../assets/imgs/1315254.png" alt="profile" />
      </button>

      <!-- Menu -->
      <mat-menu #menu="matMenu">
        <button mat-menu-item (click)="goToPage('profile')">
          <mat-icon>account_circle</mat-icon>
          <span>{{ 'HEADER.PROFILE' | translate }}</span>
        </button>
        <button mat-menu-item (click)="goToPage('settings')">
          <mat-icon>settings</mat-icon>
          <span>{{ 'HEADER.SETTINGS' | translate }}</span>
        </button>
        <button mat-menu-item (click)="logout()">
          <mat-icon>logout</mat-icon>
          <span>{{ 'HEADER.LOGOUT' | translate }}</span>
        </button>
      </mat-menu>

      <!-- Notifications -->
      <mat-menu #notifications="matMenu">
        <h1 *ngIf="userNotifications == null">{{ "HEADER.NO-NEW-NOTIFICATIONS" | translate }}</h1>
        <div *ngIf="userNotifications != null">
          <button mat-menu-item (click)="goToPage('profile')">
            <mat-icon>notifications</mat-icon>
          </button>
        </div>
      </mat-menu>

      <!-- Chat -->
      <mat-menu #chat="matMenu">
        <h1 *ngIf="chats == null">{{ "HEADER.NO-NEW-CONVERSATION" | translate }}</h1>
        <div *ngIf="chats != null">
          <button mat-menu-item (click)="goToPage('profile')">
            <mat-icon>chat</mat-icon>
          </button>
        </div>
      </mat-menu>

      <button mat-icon-button aria-label="icon-button with share icon" (click)="goToPage('about')">
        <mat-icon>help</mat-icon>
      </button>
    </div>
  </mat-toolbar>

  <mat-sidenav-container class="example-sidenav-container">
    <mat-sidenav #snav [mode]="'over'" fixedTopGap="102">
      <mat-nav-list>
        <mat-selection-list role="list">
          <mat-divider></mat-divider>
          <mat-list-item role="button" *ngIf="userId">
            <a (click)="goToPage('notifications')">
              {{ 'NOTIFICATIONS' | translate }}
            </a>
          </mat-list-item>
          <mat-divider></mat-divider>
          <mat-list-item role="button" *ngIf="userId">
            <a (click)="goToPage('chat')">
              {{ 'CHATS' | translate }}
            </a>
          </mat-list-item>
          <mat-divider></mat-divider>
        </mat-selection-list>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

解决了这个问题，把它恢复到我让它与手机兼容之前的状态:

<mat-toolbar color="primary" class="header-top">
  <span class="toolbar-text" (click)="goToPage('home')">FindME!</span>
  <span class="spacer"></span>
  <mat-form-field>
    <mat-select [(value)]="selectedLang" (valueChange)="changedLanguage()" id="lang-select">
      <mat-option *ngFor="let lang of langs" [value]="lang">
        <!-- {{ lang | translate }} -->
        {{ lang.split('-')[0].toUpperCase() }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <button mat-icon-button (click)="goToPage('access')" *ngIf="!cookieService.get('UserId')">
    <mat-icon>manage_accounts</mat-icon>
  </button>
  <button mat-icon-button [matMenuTriggerFor]="notifications" *ngIf="cookieService.get('UserId')">
    <mat-icon>notifications</mat-icon>
  </button>
  <button mat-icon-button [matMenuTriggerFor]="chat" *ngIf="cookieService.get('UserId')">
    <mat-icon>chat</mat-icon>
  </button>
  <button mat-icon-button class="icon-button" [matMenuTriggerFor]="menu" *ngIf="cookieService.get('UserId')">
    <img class="icon" src="../assets/imgs/1315254.png" alt="profile" />
  </button>

  <!-- Menu -->
  <mat-menu #menu="matMenu">
    <button mat-menu-item (click)="goToPage('profile')">
      <mat-icon>account_circle</mat-icon>
      <span>{{ 'HEADER.PROFILE' | translate }}</span>
    </button>
    <button mat-menu-item (click)="goToPage('settings')">
      <mat-icon>settings</mat-icon>
      <span>{{ 'HEADER.SETTINGS' | translate }}</span>
    </button>
    <button mat-menu-item (click)="logout()">
      <mat-icon>logout</mat-icon>
      <span>{{ 'HEADER.LOGOUT' | translate }}</span>
    </button>
  </mat-menu>
  <!-- Notifications -->
  <mat-menu #notifications="matMenu">
    <h1 *ngIf="userNotifications == null">{{ "HEADER.NO-NEW-NOTIFICATIONS" | translate }}</h1>
    <div *ngIf="userNotifications != null">
      <button mat-menu-item (click)="goToPage('profile')">
        <mat-icon>notifications</mat-icon>
      </button>
    </div>
  </mat-menu>
  <!-- Chat -->
  <mat-menu #chat="matMenu">
    <h1 *ngIf="chats == null">{{ "HEADER.NO-NEW-CONVERSATION" | translate }}</h1>
    <div *ngIf="chats != null">
      <button mat-menu-item (click)="goToPage('profile')">
        <mat-icon>chat</mat-icon>
      </button>
    </div>
  </mat-menu>

  <button mat-icon-button aria-label="icon-button with share icon" (click)="goToPage('about')">
    <mat-icon>help</mat-icon>
  </button>
</mat-toolbar>

所以我觉得很蠢很抱歉浪费了你的时间.也许我会删除这个问题，因为它没有帮助任何人在所有，但是的，感谢您的帮助和关注！！

推荐答案

它真的很奇怪，我试图重现的问题，但你的代码工作得很好，也许复制的问题，在stackblitz和共享回来！

编码

<编码>import { Component, Inject, Renderer2 } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
import { MatButtonModule } from '@angular/material/button';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { DOCUMENT } from '@angular/common';
import { FormsModule } from '@angular/forms';

/**
 * @title Basic buttons
 */
@Component({
  selector: 'button-overview-example',
  templateUrl: 'button-overview-example.HTML',
  styleUrls: ['button-overview-example.css'],
  standalone: true,
  imports: [
    MatButtonModule,
    MatDividerModule,
    MatIconModule,
    MatSlideToggleModule,
    FormsModule,
  ],
})
export class ButtonOverviewExample {
  isDark = false;
  selectedTheme: string;

  constructor(
    private render: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  toggleTheme() {
    this.selectedTheme = this.isDark ? 'dark' : 'light';
    this.changedTheme();
  }

  changedTheme(): void {
    this.render.removeClass(this.document.body, 'light-theme');
    this.render.removeClass(this.document.body, 'dark-theme');
    this.render.removeClass(this.document.body, 'light-background');
    this.render.removeClass(this.document.body, 'dark-background');
    this.render.addClass(
      this.document.body,
      this.selectedTheme.toLowerCase() + '-theme'
    );
    this.render.addClass(
      this.document.body,
      this.selectedTheme.toLowerCase() + '-background'
    );
  }
}

HTML

<编码>Light
<mat-slide-toggle [(ngModel)]="isDark" (ngModelChange)="toggleTheme()"
  >Dark</mat-slide-toggle
>
<br />

<section>
  <div class="example-label">Basic</div>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-button color="primary">Primary</button>
    <button mat-button color="accent">Accent</button>
    <button mat-button color="warn">Warn</button>
    <button mat-button disabled>Disabled</button>
    <a mat-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Raised</div>
  <div class="example-button-row">
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
    <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Stroked</div>
  <div class="example-button-row">
    <button mat-stroked-button>Basic</button>
    <button mat-stroked-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-stroked-button color="warn">Warn</button>
    <button mat-stroked-button disabled>Disabled</button>
    <a mat-stroked-button href="https://www.google.com/" target="_blank"
      >Link</a
    >
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Flat</div>
  <div class="example-button-row">
    <button mat-flat-button>Basic</button>
    <button mat-flat-button color="primary">Primary</button>
    <button mat-flat-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-flat-button disabled>Disabled</button>
    <a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Icon</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <button
        mat-icon-button
        aria-label="Example icon button with a vertical three dot icon"
      >
        <mat-icon>more_vert</mat-icon>
      </button>
      <button
        mat-icon-button
        color="primary"
        aria-label="Example icon button with a home icon"
      >
        <mat-icon>home</mat-icon>
      </button>
      <button
        mat-icon-button
        color="accent"
        aria-label="Example icon button with a menu icon"
      >
        <mat-icon>menu</mat-icon>
      </button>
      <button
        mat-icon-button
        color="warn"
        aria-label="Example icon button with a heart icon"
      >
        <mat-icon>favorite</mat-icon>
      </button>
      <button
        mat-icon-button
        disabled
        aria-label="Example icon button with a open in new tab icon"
      >
        <mat-icon>open_in_new</mat-icon>
      </button>
    </div>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">FAB</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <div class="example-button-container">
        <button
          mat-fab
          color="primary"
          aria-label="Example icon button with a delete icon"
        >
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-fab
          color="accent"
          aria-label="Example icon button with a bookmark icon"
        >
          <mat-icon>bookmark</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-fab
          color="warn"
          aria-label="Example icon button with a home icon"
        >
          <mat-icon>home</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-fab
          disabled
          aria-label="Example icon button with a heart icon"
        >
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Mini FAB</div>
  <div class="example-button-row">
    <div class="example-flex-container">
      <div class="example-button-container">
        <button
          mat-mini-fab
          color="primary"
          aria-label="Example icon button with a menu icon"
        >
          <mat-icon>menu</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-mini-fab
          color="accent"
          aria-label="Example icon button with a plus one icon"
        >
          <mat-icon>plus_one</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-mini-fab
          color="warn"
          aria-label="Example icon button with a filter list icon"
        >
          <mat-icon>filter_list</mat-icon>
        </button>
      </div>
      <div class="example-button-container">
        <button
          mat-mini-fab
          disabled
          aria-label="Example icon button with a home icon"
        >
          <mat-icon>home</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>

stackblitz

Typescript相关问答推荐

TypScript手册中的never[]参数类型是什么意思？

即使子网是公共的，AWS CDK EventBridge ECS任务也无法分配公共IP地址

参数类型undefined不能分配给参数类型字符串｜未定义

需要使用相同组件重新加载路由变更数据—React TSX

`((PrevState：NULL)=>；NULL)｜null`是什么意思？

Angular 错误NG0303在Angular 项目中使用app.Component.html中的NGFor

如何在LucideAngular 添加自定义图标以及如何使用它们

如何解决类型T不能用于索引类型{ A：typeof A; B：typeof B;. }'

在HighChats列时间序列图中，十字准线未按预期工作

如何在typescript中为this关键字设置上下文

TypeScrip：使用Union ToInterval辅助对象，但保留子表达式

TypeScrip-根据一个参数值验证另一个参数值

顶点堆叠的图表条形图未在正确的x轴上显示

有没有一种更好的方法来存储内存中的数据，而不是在类型脚本中使用数组和基于索引的函数？

使用强制转换编写打字函数的惯用方法

如何创建由一个帐户签名但使用另一个帐户支付的Hedera交易

React中的效果挂钩在依赖项更新后不会重新执行

传入类型参数<；T>；变容函数

如何将 MUI 主题对象的自定义属性与情感样式组件中的自定义props 一起使用？

是否有解释为什么默认情况下在泛型类型上访问的属性不是索引访问

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630