如何使用包装整个 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如何使用包装整个 UI-VIEW 指令的触发器查询 Angular 4 中动画的 UI-VIEW 的 :enter 和 :leave
【发布时间】：2018-04-08 01:16:12
【问题描述】：

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

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

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

这是我需要答案的堆栈闪电战...

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.)

【问题讨论】：

标签： javascript angular angular-ui-router angular-router angular-animations

【解决方案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() 返回的状态名称

【讨论】：