【发布时间】：2020-04-23 18:34:17
【问题描述】：
我几乎找不到任何关于此的信息。谷歌上出现的几乎所有内容都是关于 Angular 1 的，而我发现的关于 Angular 2 的内容都不起作用（http://www.talkinghightech.com/en/angular-2-end-2-end-testing/）。
我正在寻找一种方法来禁用 CSS 动画和我的 angular 2 组件上的动画。
【问题讨论】：
标签： angular protractor
【发布时间】：2020-04-23 18:34:17
【问题描述】：
现在this bug 已关闭，您可以使用称为@.disabled 的特殊绑定禁用子动画。它既可以应用于本地组件，也可以应用于整个应用程序。
这是他们代码文档中的引述：
@Component({
selector: 'my-component',
template:
<div [@.disabled]="isDisabled">
<div [@childAnimation]="exp"></div>
</div>
animations: [
trigger("childAnimation", [
//...
])
]
})
class MyComponent {
isDisabled = true;
exp = '...';
}
或应用范围：
import {Component, HostBinding} from '@angular/core';
@Component({
selector: 'app-component',
templateUrl: 'app.component.html',
})
class AppComponent {
@HostBinding('@.disabled')
public animationsDisabled = true;
}
我希望这会有所帮助！
【讨论】：
-
解决这个问题的好方法！谢谢！
我只花了几个小时来正确设置所有内容，因此分享所有过程以防将来对某人有所帮助。
这就是我在 Angular 6 应用程序中运行量角器测试时关闭所有角度动画的方法（但它应该适用于所有等于或大于 2 的 Angular 版本）。
在src/environments文件夹中，添加一个名为：environment.e2e.ts的文件，内容如下：
export const environment = {
production: false,
disableAnimations: true
};
在您拥有的所有其他环境中，应该是.prod 和默认环境，添加属性disableAnimations: false。
然后在您的根组件中，通常应该是您的应用程序组件，将以下输入属性添加到根标记：
<div [@.disabled]="disableAnimations">
<!-- ALL THE CONTENT -->
</div>
并在您的组件代码中，添加以下内容：
import { Component } from '@angular/core';
import { environment } from './../environments/environment';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
disableAnimations: boolean;
constructor() {
// pick from the environment if you need to disable the animations
// they are disabled for e2e tests speed up
this.disableAnimations = environment.disableAnimations;
}
}
通过这种方式，您将从当前环境中获取值，并根据该值禁用/启用应用内的所有动画。
这就是您在应用代码中所需要的全部内容。
您错过的是指定ng e2e 命令，以获取与 e2e 测试关联的相应环境文件，这将禁用动画。
为此，请在项目根目录中打开您的 angular.json 文件，然后按照以下步骤操作（我遵循我的名称约定，但您可以随意使用您喜欢的名称，请务必以正确的方式引用名称。在以下示例中，我的项目名称为app-test)：
- 添加一个名为
app-test-e2e的新项目，其目标是主项目的serve-e2e构建 - 将
serve-e2e构建添加到主项目的构建中，其目标是主项目构建的测试配置 - 将
test配置添加到构建的配置中，这会将默认的environment.ts替换为environment.e2e.ts
因此，angular.json 中应该包含的重要代码类似于：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app-test": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/app-test",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"test": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.e2e.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app-test:build"
},
"configurations": {
"production": {
"browserTarget": "app-test:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app-test:build"
}
},
"test": {
"builder": "@angular-builders/jest:run",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": ["src/styles.css"],
"scripts": [],
"assets": ["src/favicon.ico", "src/assets"]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
}
},
"serve-e2e": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app-test:build"
},
"configurations": {
"test": {
"browserTarget": "app-test:build:test"
}
}
}
}
},
"app-test-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app-test:serve-e2e:test"
},
"configurations": {
"production": {
"devServerTarget": "app-test:serve-e2e:test"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": ["**/node_modules/**"]
}
}
}
}
},
"defaultProject": "app-test"
}
如果您现在通过命令 npm run e2e 或 ng e2e 执行 e2e 测试，它应该会选择正确的环境文件并禁用所有应用程序中的动画。
【讨论】：
我们已经通过config/env settings...通过我们的core.module进行了可选的测试
@NgModule({
imports: [
BrowserModule,
environment.noAnimations ? NoopAnimationsModule : BrowserAnimationsModule,
【讨论】：
-
简洁优雅。谢谢它对我来说就像一个魅力。
-
这应该是公认的答案。这一行取代了上述答案中必须接触 3 或 4 个不同的组件。