html - 版本不兼容是否会阻止我的 Angular CLI 动画工作?
问题描述
我有一个项目要做。当我开始工作时,Angular 项目已经设置好了。但是,动画似乎无法正常工作。当我放置一个垫输入占位符时,占位符在我开始写入时不会消失。当我放置一个 mat-select 时,选择不会下拉。
这是我的 package.json:
{
"name": "projetwifi-dashboard",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"serve": "ng serve --configuration=dev",
"start": "node server.js",
"build": "ng build",
"build:dev": "ng build --prod --configuration=dev",
"build:accept": "ng build --prod --configuration=accept",
"build:prod": "ng build --prod --configuration=production",
"test": "ng test",
"test:ci": "ng test --code-coverage=true --watch=false",
"lint": "ng lint && prettier -l \"**/*.ts\"",
"lint-fix": "ng lint --fix && prettier \"**/*.ts\" --write",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.2.0",
"@angular/cdk": "^12.0.0",
"@angular/common": "~10.2.0",
"@angular/compiler": "^10.2.5",
"@angular/core": "~10.2.0",
"@angular/forms": "~10.2.0",
"@angular/material": "^10.2.7",
"@angular/platform-browser": "~10.2.0",
"@angular/platform-browser-dynamic": "~10.2.0",
"@angular/router": "~10.2.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-prom-bundle": "^6.2.0",
"googleapis": "^74.2.0",
"prom-client": "^12.0.0",
"puppeteer": "^5.4.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1002.3",
"@angular/cli": "~10.2.0",
"@angular/compiler-cli": "^10.2.5",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
我尝试了许多版本的依赖项,但似乎没有任何解决问题的方法。有任何想法吗?谢谢
解决方案
欢迎来到 SO 社区!为了回答您的问题,我将不得不猜测一下,因为您没有为我们提供最低限度的可重现示例。
通常,为了使角度动画起作用,您必须BrowserAnimationsModule
按照文档中的说明包含。
我会这样做:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule
],
declarations: [ ],
bootstrap: [ ]
})
export class AppModule { }
一旦你有了它,你就可以使用 Angular 动画了。请使用上面的链接查看它是如何完全工作的,但基本上,我的预感是你没有包含这个模块,因此你的动画不起作用。我给出的指南是官方的 Angular 文档,它应该可以帮助您入门。
推荐阅读
- push-notification - java中的grpc推送通知示例
- python - tkinter中可调整大小的窗口框架
- python - 列表索引超出范围处理 CSV 文件
- c++ - 结构更改的指针
- javascript - 使用 javascript 在 Indesign 中计算字符的不同方法
- ionic-framework - Ionic 3:如果这是一个您想与 Ionic 集成的项目,请创建一个 ionic.config.json 文件
- racket - 以编程方式访问合同
- ffmpeg - FFMpeg 从 HLS 直播流创建缩略图
- cuda - CUDA内核不返回值
- java - PDFBox 对齐数字反之亦然