加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 2动画不起作用

发布时间:2020-12-17 17:09:33 所属栏目:安全 来源:网络整理
导读:按照Angular 2动画文档( https://angular.io/docs/ts/latest/guide/animations.html),我迁移到Angular 4.0.1.这是我的package.json的一部分: "@angular/common": "~4.0.1","@angular/compiler": "~4.0.1","@angular/core": "~4.0.1","@angular/forms": "~4.
按照Angular 2动画文档( https://angular.io/docs/ts/latest/guide/animations.html),我迁移到Angular 4.0.1.这是我的package.json的一部分:

"@angular/common": "~4.0.1","@angular/compiler": "~4.0.1","@angular/core": "~4.0.1","@angular/forms": "~4.0.1","@angular/http": "~4.0.1","@angular/platform-browser": "~4.0.1","@angular/platform-browser-dynamic": "~4.0.1","@angular/router": "~4.0.1","@angular/animations": "~4.0.1","typescript": "^2.2.2","zone.js": "^0.8.4"

system.config.js

'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js','@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js','@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common': 'npm:@angular/common/bundles/common.umd.js','@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js','@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js','@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js','@angular/http': 'npm:@angular/http/bundles/http.umd.js','@angular/router': 'npm:@angular/router/bundles/router.umd.js','@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js','@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js','@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js','@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule,Title } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  imports:      [ BrowserModule,BrowserAnimationsModule,appRouting,FormsModule ],...
})

在我的自定义组件中,我还导入了角度动画:

import { trigger,state,style,animate,transition } from '@angular/animations';

我的视图(templateUrl分配的外部视图!)如下所示:

<div class="container" [@containerState]="showContainer">
...
</div>

问题是:我总是收到控制台错误消息:

错误:未捕获(在承诺中):错误:找到合成属性@containerState.请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”.

当我删除这个合成属性一切正常,但我无法使用角度动画.

有任何想法吗?我不使用angular-cli!

更新container.component.ts

import { Component,OnInit,OnDestroy,EventEmitter,HostListener,Input,Output } from '@angular/core';
import { trigger,transition } from '@angular/animations';
@Component({
    templateUrl: '...',selector: '...',animations: [
        trigger('containerState',[
            state('hide',style({transform: 'translateY(-102%)'})),transition('hide => show',[
                animate(500,style({transform: 'translateY(0)'}))
            ]),transition('show => hide',style({transform: 'translateY(-102%)'}))
            ])
        ])
    ]
})

目前正在运行……

我做了什么?删除完整的node_modules文件夹并运行全新安装.之后一切正常.很奇怪!我将尝试将另一个Angular 2.x应用程序升级到Angular 4.x.

解决方法

Angular2认为前缀’@’表示’综合侦听器’,应该由您指定的动画模块覆盖.但是,您自己使用@符号,< div class =“container”[@containerState] =“showContainer”>

尝试删除’@’并查看是否适合您.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读