随着新的Angular material 发布,您需要添加一个用于Angular 动画的模块.您可以在两个BrowserAnimationsModule和NoopAnimationsModule之间进行 Select .official guide个州:

某些material 组件依赖于中的Angular 动画模块 以便能够进行更高级的过渡.如果你想要这些 要在您的应用程序中使用动画,您必须安装 @ANGLING/动画模块,并将BrowserAnimationsModule包含在 你的应用程序.

npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

如果不想向项目添加其他依赖项,可以使用NoopAnimationsModule.

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

我不太明白这里有什么不同.似乎完全一样:)这两个模块有什么不同?

推荐答案

正如名称noop("无操作")所说,该模块不做任何事情.它是一个实用模块,它模拟真实的动画模块,但并不实际生成动画.

在动画速度太慢的平台上,或者在测试(单元、集成、带Cypress的e2e、 protractor 等)中,这非常方便,如果动画不是你真正想要测试的内容.

@NgModule({
  imports: [
    BrowserModule,
    environment.production ? BrowserAnimationsModule : NoopAnimationsModule,
    ...
   ]
   ...
}
export class AppModule {}

Angular相关问答推荐

Angulat 17@ngrx/Signals或全球服务,用什么?

以Angular 将指令事件从子组件传递到父组件

PrimeNG面包屑组件生成奇怪的&

无法绑定到appendTo,因为它不是p-confirmPopup的已知属性

将输入传递到组合Angular指令

代码优化以删除Angular中的嵌套订阅

属性';apiUrl';在我的Angular 应用程序上不存在类型';{}';错误

如何在独立应用程序中全局禁用基于媒体查询的Angular 动画?

在父组件的子组件中使用 ng-template

TypeError:this.restoreDialogRef.afterClosed 不是函数

当访问令牌在 MSAL for Angular 中过期时如何重定向用户?

如何在angular 5 中获取基本网址?

如何使用依赖注入扩展组件?

Angular为 4 的可扩展表格行,带有Angularmaterial

Angular 6在输入键上添加输入

@angular/platform-b​​rowser 与 @angular/platform-b​​rowser-dynamic

Angular Material2 主题 - 如何设置应用程序背景?

Angular 2 更改事件 - 模型更改

如何在 Angular 应用程序中通过路由更改页面标题?

Angular 4 material表突出显示一行