如何使用包装整个 UI-VIEW 指令的触发器在 Angular 4 中查询 UI-VIEW 动画的 :enter 和 :leave

Question

所以在 Angular 4.2+ 中有一个新的查询动画功能，允许您查询各种事物（:enter、:leave、class 名称、元素等），您可以对它们应用动画。我试图解决的关键概念是，您正在使用触发器包装路由器插座，然后该触发器了解两个正在动画的视图的 :enter 和 :leave。这在我正在寻找的问题和答案中是必不可少的。如果将触发器放在视图内部（主机绑定），则只能针对特定的 UI-VIEW / Router Outlet 触发。通过将它放在 UI-VIEW / Angular-Router-Outlet 的外侧，您可以控制两个视图的进出。

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

这是使用 ANGULAR 4 的内置路由器 @angular/router 可以毫无问题地找到路由器出口的 :enter 和 :leave

这是我需要答案的 stackblitz...

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

如果你打开控制台日志，你可以看到当我从 Hello -> World 转换时，我可以执行动画，我关闭了 'optional' 因为你需要它关闭所以你可以看到错误，如果你打开它，那么错误只会默默地失败（错误在下面）。触发器必须以某种方式保持包裹 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 => newstate）

prevstate / newstate 是从 getStatus() 返回的状态名称

如何使用包装整个 UI-VIEW 指令的触发器在 Angular 4 中查询 UI-VIEW 动画的 :enter 和 :leave

How can I query for :enter and :leave of a UI-VIEW for animation in Angular 4 using a trigger that wraps the entire UI-VIEW directive

javascript

angular

angular-ui-router

angular-router

angular-animations