Question

我是角度2动画的初学者，顺便说一下角度为2。

实际上我有点困惑，因为我看不到有关如何将所有动画放入单个服务的任何内容，以便通过我的组件重用它。

据我所知，动画是在@component内定义的。这让我把它放在我的所有组件中。

我休闲this article使用“工厂”：

import {trigger, state, animate, style, transition} from '@angular/core';

export function routerTransition() {
  return slideToLeft();
}

function slideToLeft() {
  return trigger('routerTransition', [
    state('void', style({position:'fixed', width:'100%'}) ),
    state('*', style({position:'fixed', width:'100%'}) ),
    transition(':enter', [  // before 2.1: transition('void => *', [
      style({transform: 'translateX(100%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [  // before 2.1: transition('* => void', [
      style({transform: 'translateX(0%)'}),
      animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
    ])
  ]);
}

但是没有@Injectable()。任何人都可以给我一个真实服务的例子，我可以将我的动画放入其中，然后将其注入我的组件中吗？当然，这很有效，但如果有可能的话，我更愿意以谷歌的方式去做，如果有谷歌方式的话。

由于

Answer 1

服务不应该负责显示警报/加载/或需要由NavController激活的任何组件。服务应该只是用于获取和返回数据。

如果您使用的是Angular 2.3及更高版本，则可以继承该组件。这样可以让您更轻松地重用代码。我的建议是创建一个可以继承的基本组件来获取动画。

如果您不想继承以下内容，也可以继承抽象类：

lifecycles hooks

有关扩展组件的详细信息，请参阅link

从服务中获取角度2动画

1 个答案: