4

我有组件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
        );
    }
}

动画.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%)'
                }))
            ])
        ])
    ];
}
4

1 回答 1

0

我遇到了同样的问题，我使用文章Using ChangeDetection With Animation To Setup Dynamic Void Transitions In Angular 2 RC 6中描述的步骤解决了这个问题。基本上你需要做3个步骤：

  1. 导入ChangeDetectorRef类

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

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

    constructor(private changeDetector: ChangeDetectorRef) {}

  3. 更改后在 ChangeDetectorRef 类的实例上调用方法detectChanges()

    // Change your model ...
SomeMethodWhichChangesTheModel();

// ... and call the detectChanges() method on the ChangeDetectorRef
this.changeDetector.detectChanges();
于 2017-03-18T18:54:59.120 回答