Angular2 在休假时运行动画和可观察过滤器

Angular 2中的休假时运行动画和可观察过滤器

typescript
// 引入Angular动画模块
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
  selector: 'app-vacation',
  templateUrl: './vacation.component.html',
  styleUrls: ['./vacation.component.css'],
  animations: [
    // 定义动画触发器
    trigger('vacationState', [
      // 定义动画状态
      state('in', style({
        opacity: 1,
        transform: 'translateY(0)'
      })),
      state('out', style({
        opacity: 0,
        transform: 'translateY(-100%)'
      })),
      // 定义状态间的过渡
      transition('in => out', animate('500ms ease-out')),
      transition('out => in', animate('500ms ease-in'))
    ])
  ]
})
export class VacationComponent {
  // 动画状态
  vacationState = 'in';
  // 切换动画状态
  toggleVacationState() {
    this.vacationState = this.vacationState === 'in' ? 'out' : 'in';
  }
}

typescript
// 引入RxJS库
import { Observable } from 'rxjs';
@Component({
  selector: 'app-data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.css']
})
export class DataListComponent implements OnInit {
  // 原始数据列表
  rawData: any[];
  // 过滤后的数据列表
  filteredData: Observable;
  // 过滤条件
  filterCondition: string = '';
  constructor(private dataService: DataService) { }
  ngOnInit() {
    // 获取原始数据
    this.dataService.getData().subscribe(data => {
      this.rawData = data;
      this.filterData();
    });
  }
  // 过滤数据
  filterData() {
    this.filteredData = this.dataService.filterData(this.rawData, this.filterCondition);
  }
}