Question

我的应用程序有这个非常通用的布局，顶部有一个标题，下面有一个内容容器：

String.valueOf(text.charAt(0))

所以，在这一点上，我了解动画 - 或至少围绕基础知识。

如果我理解正确，那么<div class="main" [@applicationTransition]="applicationState" fxLayout="column" fxFlexFill> <nav class="header">  </nav> <main class="content" fxLayout="column" fxFlex> <router-outlet #o="outlet" fxLayout="column" fxFlex></router-outlet> </main> </div>和:enter是从DOM添加或删除组件的状态，对吗？

这就是为什么我认为如果我添加一个动态更改标题的:leave（例如导航事件），这将是不言而喻的。

在我的应用程序中，我希望每个组件都设置标题的内容。然后我想利用headerTransition和:enter状态s.t.执行默认:leave。

那么我怎么能意识到这一点？我会使用第二个headerTransition还是有更简单的方法？

Answer 1

您可以按照此presentation中的Alex Rickabaugh（角度核心团队）提供的建议，创建包含router-outlet中呈现的组件所指示内容的标题。

您必须创建自定义结构指令。完整源代码可在此stackblitz中找到。

使用示例：

<强> a.component.ts

import {Component} from '@angular/core';

@Component({
  template: `
<h2>I am Route A</h2>

<div *topNav>
  <h3>Route A Nav</h3>
</div>
`
})
export class RouteA {}

<强> app.component.ts

<top-nav></top-nav>
<router-outlet></router-outlet>

对于动画，您应该使用query结合:enter和:leave个关键字。您可以将其绑定到navId$流。

app.component.html

<nav [@enterLeave]="navId$ | async">
   // header content here
</nav>

<强> app.animations.ts

trigger('enterLeave', [
  transition(':increment', [
    query(':leave', [
      animate('0.5s', style({
        opacity: 0
      })),
      style({
        display: 'none'
      })
    ]),
    query(':enter', animate('0.5s', style({
      opacity: 1
    }))),
  ]),
]);

<强> app.component.ts

navId$: Observable <number>;

constructor(private router: Router) {
  this.navId$ = this.router.events.pipe(
    filter(e => e instanceof NavigationEnd),
    map(e => e.id),
  )
}

如何更改标题的动画？

1 个答案: