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

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

这是一个内置路由器工作的WORKING StackBlitz of Angular . https://stackblitz.com/edit/ng-router-fade-transitions

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

这是我需要ANSWER的stackblitz ......

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

如果你打开控制台日志，你可以看到，当我从Hello - > World转换我能够执行动画时，我关闭了'可选'，因为你需要它，所以你可以看到错误，如果你打开然后错误只是默默地失败（错误在下面） . 触发器必须以某种方式包装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.)

1 回答

0
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 => newstate）

prevstate / newstate将是从getStatus（）返回的状态名称
回复于 2024-05-08T06:02:30+08:00

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

1 回答

相关问题