Angular 在切换<；路由器出口>；到下一个组件？

我一直在尝试在我的应用程序组件中设置两个组件之间的转换动画。 理想情况下，这就是我希望发生的事情：

当前显示的第一个组件从页面上滑出

切换到第二个组件

现在显示第二个组件，请将幻灯片滑回页面

当刷新每个URL时，我可以让每个组件在显示中显示动画

但是，当从一个组件路由到另一个组件时，第一个组件的离开动画不会发生，第二个组件的进入动画也不会发生

我环顾了stackoverflow和其他一些网站，但找不到任何对我有帮助的地方

我已经添加了我认为与该问题相关的所有代码。 （特别是，我认为这是由于从组件1到组件2的路由，因为当我刷新任何一个组件时，都会出现介绍动画）

AppComponent.ts

import { slider } from "./route-animations";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  animations: [slider]
})
export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return (
      outlet &&
      outlet.activatedRouteData &&
      outlet.activatedRouteData["animation"]
    );
  }
}

export const slider = trigger("routeAnimations", [
  transition("* => isLeft", slideTo("right")),
  transition("* => isRight", slideTo("right")),
  transition("isRight => *", slideTo("right")),
  transition("isLeft => *", slideTo("right"))
]);

function slideTo(direction) {
  const optional = { optional: true };
  return [
    query(
      ":enter, :leave",
      [
        style({
          position: "absolute",
          [direction]: 0,
          width: "100%"
        })
      ],
      optional
    ),
    query(":enter", [style({ [direction]: "-100%" })]),
    group([
      query(
        ":leave",
        [animate("600ms ease", style({ [direction]: "100%" }))],
        optional
      ),
      query(":enter", [animate("600ms ease", style({ [direction]: "0%" }))])
    ])
  ];
}

@Component({
  selector: "app-first-component",
  templateUrl: "./first-component.component.html",
  styleUrls: ["./first-component.component.css"]
})
export class FirstComponentComponent implements OnInit {
  personForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private router: Router) {}

  ngOnInit() {
    localStorage.removeItem("firstName");
    localStorage.removeItem("lastName");
    this.personForm = this.formBuilder.group({
      firstName: ["", [Validators.required]],
      lastName: ["", [Validators.required]]
    });
  }

  addPerson(person: FormGroup) {
    localStorage.setItem("names", JSON.stringify(person));
    this.router.navigate(["/second-component"]);
  }
}

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-second-component",
  templateUrl: "./second-component.component.html",
  styleUrls: ["./second-component.component.css"]
})
export class SecondComponentComponent implements OnInit {
  firstName: string = "";
  lastName: string = "";
  constructor() {}

  ngOnInit(): void {
    this.firstName = JSON.parse(localStorage.getItem("names")).firstName;
    this.lastName = JSON.parse(localStorage.getItem("names")).lastName;
  }
}

AppComponent html

<main class="row">
  <section class="col-sm-6 col-md-6 col-lg-6">Left Part</section>
  <section
    [@routeAnimations]="prepareRoute(outlet)"
    class="col-sm-6 col-md-6 col-lg-6 justify-content-center"
  >
    <router-outlet #outlet="outlet"></router-outlet>
  </section>
</main>

<div>
  <form [formGroup]="personForm" (ngSubmit)="addPerson(personForm.value)">
    <div class="form-group">
      <label>First Name</label>
      <input
        type="text"
        class="form-control shadow"
        formControlName="firstName"
      />
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input
        type="text"
        class="form-control shadow"
        formControlName="lastName"
      />
    </div>
    <div>
      <button type="submit">
        Submit
      </button>
    </div>
  </form>
</div>

<p>Hello, {{ firstName }} {{ lastName }}</p>

FirstComponent.ts

import { slider } from "./route-animations";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  animations: [slider]
})
export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return (
      outlet &&
      outlet.activatedRouteData &&
      outlet.activatedRouteData["animation"]
    );
  }
}

export const slider = trigger("routeAnimations", [
  transition("* => isLeft", slideTo("right")),
  transition("* => isRight", slideTo("right")),
  transition("isRight => *", slideTo("right")),
  transition("isLeft => *", slideTo("right"))
]);

function slideTo(direction) {
  const optional = { optional: true };
  return [
    query(
      ":enter, :leave",
      [
        style({
          position: "absolute",
          [direction]: 0,
          width: "100%"
        })
      ],
      optional
    ),
    query(":enter", [style({ [direction]: "-100%" })]),
    group([
      query(
        ":leave",
        [animate("600ms ease", style({ [direction]: "100%" }))],
        optional
      ),
      query(":enter", [animate("600ms ease", style({ [direction]: "0%" }))])
    ])
  ];
}

@Component({
  selector: "app-first-component",
  templateUrl: "./first-component.component.html",
  styleUrls: ["./first-component.component.css"]
})
export class FirstComponentComponent implements OnInit {
  personForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private router: Router) {}

  ngOnInit() {
    localStorage.removeItem("firstName");
    localStorage.removeItem("lastName");
    this.personForm = this.formBuilder.group({
      firstName: ["", [Validators.required]],
      lastName: ["", [Validators.required]]
    });
  }

  addPerson(person: FormGroup) {
    localStorage.setItem("names", JSON.stringify(person));
    this.router.navigate(["/second-component"]);
  }
}

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-second-component",
  templateUrl: "./second-component.component.html",
  styleUrls: ["./second-component.component.css"]
})
export class SecondComponentComponent implements OnInit {
  firstName: string = "";
  lastName: string = "";
  constructor() {}

  ngOnInit(): void {
    this.firstName = JSON.parse(localStorage.getItem("names")).firstName;
    this.lastName = JSON.parse(localStorage.getItem("names")).lastName;
  }
}

FirstComponent html

<main class="row">
  <section class="col-sm-6 col-md-6 col-lg-6">Left Part</section>
  <section
    [@routeAnimations]="prepareRoute(outlet)"
    class="col-sm-6 col-md-6 col-lg-6 justify-content-center"
  >
    <router-outlet #outlet="outlet"></router-outlet>
  </section>
</main>

<div>
  <form [formGroup]="personForm" (ngSubmit)="addPerson(personForm.value)">
    <div class="form-group">
      <label>First Name</label>
      <input
        type="text"
        class="form-control shadow"
        formControlName="firstName"
      />
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input
        type="text"
        class="form-control shadow"
        formControlName="lastName"
      />
    </div>
    <div>
      <button type="submit">
        Submit
      </button>
    </div>
  </form>
</div>

<p>Hello, {{ firstName }} {{ lastName }}</p>

SecondComponent.html

<main class="row">
  <section class="col-sm-6 col-md-6 col-lg-6">Left Part</section>
  <section
    [@routeAnimations]="prepareRoute(outlet)"
    class="col-sm-6 col-md-6 col-lg-6 justify-content-center"
  >
    <router-outlet #outlet="outlet"></router-outlet>
  </section>
</main>

<div>
  <form [formGroup]="personForm" (ngSubmit)="addPerson(personForm.value)">
    <div class="form-group">
      <label>First Name</label>
      <input
        type="text"
        class="form-control shadow"
        formControlName="firstName"
      />
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input
        type="text"
        class="form-control shadow"
        formControlName="lastName"
      />
    </div>
    <div>
      <button type="submit">
        Submit
      </button>
    </div>
  </form>
</div>

<p>Hello, {{ firstName }} {{ lastName }}</p>

你好，{{firstName}{{lastName}}