Question

所以在Angular 4.2+中有一个新的Query动画函数，它允许你查询各种事物（：enter，：leave，class names，elements等），你可以对它们应用动画。我试图解决的KEY概念是你用一个触发器包裹路由器插座，然后该触发器知道：输入和：保留动画的两个视图。这是我所寻求的问答中的基本要素。如果将触发器置于视图（主机绑定）中，则只能触发该特定的UI-VIEW /路由器插座。通过将其放在UI-VIEW / Angular-Router-Outlet的OUTSIDE上，您可以控制两个视图的输入和输出。

这是Angular的WORKING StackBlitz，内置路由器正常工作。 https://stackblitz.com/edit/ng-router-fade-transitions

这是使用ANGULAR 4的内置路由器@ angular / router，没有问题找到：输入和：路由器插座的离开

这是我需要ANSWER To ...

的stackblitz

https://stackblitz.com/edit/ui-router-transitions

如果您打开控制台日志，则可以看到当我从Hello转换时，＆gt;世界我能够执行动画，我关闭'可选'，因为你需要它，所以你可以看到错误，如果你打开它然后错误只是无声地失败（错误在下面）。触发器必须以某种方式包装UI-VIEW插座，因此非常感谢任何帮助。

errors.ts:42 ERROR Error: Unable to process animations due to the following failed trigger transitions
@fadeAnimation has failed due to:

- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)

Answer 1

UIRouter 1.0.0-rc.0已经发布，现在已经发布到UIRouter。

查询动画，你会做这样的事情：

        <div [@uiAnimation]="getStatus(mainState)">
            <ui-view #mainState></ui-view>
        </div>

以及组件中相应的Typescript：

private lastState = null;

public getStatus(uiview) {
     const state = uiview.state.name;
     if (state !== this.lastState) {
          this.lastState = state;
     }
     return `${state.replace('app.', '' )}`;
}

然后在动画代码中，您可以触发转换（prevstate =＆gt; newstate）

prevstate / newstate将是从getStatus（）

返回的州名

我如何查询：输入和：使用包装整个UI-VIEW指令的触发器在Angular 4中保留UI-VIEW动画

1 个答案: