2016-09-24 33 views
0

我在模板中绑定动画触发器名称时出现错误。 [@triggerName]似乎不起作用。我错过了什么?Angular2 RC4动画触发器绑定错误

组件

import {Component, ViewChild, ViewChildren, Input, ElementRef, Renderer} from '@angular/core'; 
import {trigger, state, style, transition, animate} from '@angular/core'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'Header', 
    templateUrl: '/components/header/header.html', 
    directives: [], 

providers: [], 
    host: {'(document:click)': 'closeLoginModal($event)'}, 
    animations: [ 
     trigger('showLoginTrigger', [ 
      state('true', style({opacity: '1',})), 
      state('false', style({opacity: '0',})), 
      transition('0 => 1', animate('400ms ease-in')), 
      transition('1 => 0', animate('400ms ease-out')) 
     ]) 
    ] 
}) 
export class Header { 
    static get parameters() { 
     return [[ElementRef]]; 
    } 
    constructor(ElementRef) { 
     this.el = ElementRef.nativeElement; 
     this.showLogin = true; 
     this.showMenu = false; 
     this.test = true; 
    } 
    closeLoginModal(e) { 
     if (this.el.contains(e.target)) return; 
     this.showLogin = false; 
    } 
} 

模板玉

button.no-border((click)='test=!test') LOGIN 
    .login-modal(*ngIf='showLogin', [@showLoginTrigger]='test') 
     h2 
      | Publisher 
      br 
      | Login 

我得到的错误是:

不能绑定到 '@showLoginTrigger',因为它不是一个已知本地 属性

回答

3

问题是与语法[@showLoginTrigger] = '测试'


RC4:它应该是@ showLoginTrigger = '测试'


RC5及更高版本:应该是[@showLoginTrigger ] ='test'

+1

Geez,SMH。非常感谢! –

+0

不客气! – micronyks