Góc 2 Hoạt ảnh - kích hoạt boolean?

Question

Tôi đang cố gắng kích hoạt chuyển tiếp được liên kết với thuộc tính boolean, nhưng điều này dường như không kích hoạt.

Đây là một phiên bản cắt giảm của hoạt hình kích hoạt của tôi

trigger(
    'trueFalseAnimation', [ 
    transition('* => true', [ 
     style({backgroundColor: '#00f7ad'}), 
     animate('2500ms', style({backgroundColor: '#fff'})) 
    ]), 
    transition('* => false', [ 
     style({backgroundColor: '#ff0000'}), 
     animate('2500ms', style({backgroundColor: '#fff'})) 
    ]) 
    ] 
) 

HTML:

<div [@trueFalseAnimation]="model.someProperty">Content here</div> 

Để kiểm tra:

ngOnInit() { 

    setTimeout(() => { 
     this.model.someProperty = true; 
     setTimeOut(() => { 
      this.model.someProperty = false; 
     }, 5000);  
    }, 1000) 
} 

Trigger không bao giờ xảy ra khi someProperty thay đổi.

Như một thử nghiệm nhanh Tôi đã thay đổi kích hoạt để sử dụng một chuỗi và nó hoạt động

trigger(
     'trueFalseAnimation', [ 
     transition('* => Success', [ 
      style({backgroundColor: '#00f7ad'}), 
      animate('2500ms', style({backgroundColor: '#fff'})) 
     ]), 
     transition('* => Failed', [ 
      style({backgroundColor: '#ff0000'}), 
      animate('2500ms', style({backgroundColor: '#fff'})) 
     ]) 
     ] 
    ) 

Để kiểm tra:

ngOnInit() { 

    setTimeout(() => { 
     this.model.someProperty = "Success"; 
     setTimeOut(() => { 
      this.model.someProperty = "Failed"; 
     }, 5000);  
    }, 1000) 
} 

Ví dụ thứ hai làm việc tốt

Câu hỏi của tôi là

1. Boolean được hỗ trợ làm trình kích hoạt?
2. Nếu có đến # 1, tôi là gì làm sai?

Answer 1

1. Dường như không. Tôi thấy rằng một vấn đề (12337) đã được nâng lên cho việc này, nhưng hiện chưa có bản cập nhật nào.
2. Một giải pháp thay thế khác là sử dụng 1 và 0 thay vì đúng và sai.

Xem plunker từ here.

trigger('isVisibleChanged', [ 
     state('true' , style({ opacity: 1, transform: 'scale(1.0)' })), 
     state('false', style({ opacity: 0, transform: 'scale(0.0)' })), 
     transition('1 => 0', animate('300ms')), 
     transition('0 => 1', animate('900ms')) 
]) 

Answer 2

Tôi gặp sự cố tương tự. Không chắc chắn nếu boolean được hỗ trợ như là gây nên, nhưng workaround tôi tìm thấy là để xác định một tài sản chuỗi với một getter để trả về giá trị boolean như chuỗi. Một cái gì đó như thế này:

get somePropertyStr():string { 
    return this.someProperty.toString(); 
} 

Sau đó, bạn nên liên kết hoạt ảnh của mình với thuộc tính somePropertyStr.

Một lần nữa, đây là giải pháp xấu, điều tốt nhất sẽ có thể sử dụng giá trị boolean.