Angular Material Elements 不会对更改做出反应

Posted 2023-03-13

【中文标题】Angular Material Elements 不会对更改做出反应

【英文标题】：Angular Material Elements do not react to changes

【发布时间】：2020-03-12 12:52:40

【问题描述】：

无论我在 Angular 8 项目中添加什么 Angular 材质元素（mat-tab、mat-button-toggle、mat-select、mat-input...），它们都不会更新。例如，在 mat-tab 中，会绘制波纹效果，但选项卡不会更改。 mat-button-toggle 显示了类似的行为。 mat-select 中的选项不显示，mat-input 中的浮动标签不浮动。 我的代码基本上来自 Angular Material 页面：

BrowserModule 和 BrowserAnimationsModule 被导入到 AppModule 中。

html：

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

模块：

import  NgModule  from '@angular/core';
import  MatTabsModule  from '@angular/material';
import  CommonModule  from '@angular/common';
import  IhTabComponent  from './tab.component';

@NgModule(
  imports: [
    CommonModule,
    MatTabsModule,
  ],
  declarations: [IhTabComponent],
  exports: [IhTabComponent],
  entryComponents: [IhTabComponent],
)
export class TabModule 

在我的其他 Angular 7 项目中，所有 Angular Material 元素都可以正常工作。

【问题讨论】：

你是否导入了所有正确的模块，我在那里只看到MatTabsModule。

这里我只以mat-tab为例

您是否导入了 BrowsersAnimationModule？那个是必要的

是的，是在app.module（根模块）中导入的

【参考方案1】：

如果有人对解决方案感兴趣。我的问题是由 main.ts 文件中的ngZone: 'noop' 引起的。它禁用更改检测。

所以改变这个

platformBrowserDynamic()
.bootstrapModule(AppModule, 
 ngZone: 'noop'
)
.catch(err => console.error(err));

到这里

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

用 Angular Material Elements 解决了我的问题。