当模型更改时，Angular2动画

Question

i具有组件 PageComponent，哪些数据在不同的URL上续订。Page模型更改时，我想要动画。在我给定的示例动画中，只有加载PageComponent时首次起作用。

我应该添加/更改模型时动画会起作用？

page.component.ts

@Component({
    selector: 'my-page',
    templateUrl: './page.component.html',
    styleUrls: ['./page.component.scss'],
    providers: [PageService],
    pipes: [SafePipe],
    host: { '[@routeAnimation]': 'true' },
    animations: Animations.page
})
export class PageComponent implements OnInit {
    page: Page;
    constructor(private route: ActivatedRoute,
                private pageService: PageService) {
    }
    ngOnInit() {
        this.route.params.forEach((params: Params) => {
            let uri = params['uri'];
            this.getPage(uri);
        });
    }
    getPage(uri: string) {
        this.pageService.getPage(uri).subscribe(
            page => this.page = page,
            error => this.errorMessage = <any>error
        );
    }
}

animation.ts

import {style, animate, transition, state, trigger} from '@angular/core';
export class Animations {
    static page = [
        trigger('routeAnimation', [
            transition('void => *', [
                style({
                    opacity: 0,
                    transform: 'translateX(-100%)'
                }),
                animate('2s ease-in')
            ]),
            transition('* => void', [
                animate('2s 10 ease-out', style({
                    opacity: 0,
                    transform: 'translateX(100%)'
                }))
            ])
        ])
    ];
}

Answer 1

我也遇到了相同的问题，我使用文章中描述的步骤使用Animation使用Animation进行更改tone tonip tonip dynamic void transition在Angular 2 rc 6中进行了解决。基本上有3个步骤需要执行：

1. import changeetectorref class

   import { ChangeDetectorRef } from "@angular/core";
   

2. 使用依赖项注入创建此类的实例

   constructor(private changeDetector: ChangeDetectorRef) {}
   

3. 调用方法 detectChanges（）在您的实例上更改后 class clange the Change

   之后

   // Change your model ...
   SomeMethodWhichChangesTheModel();
   // ... and call the detectChanges() method on the ChangeDetectorRef
   this.changeDetector.detectChanges();