Angular路由切换新增动画效果

Angular路由切换新增动画效果

step1: 新增路由模块和新增5个组件

ng generate module app-routing --flat --module=app
ng generate component app-layout
ng generate component home      
ng generate component selfie    
ng generate component verify    
ng generate component documentation

step2:路由管理类 D:\vue\untitledRouter2903\src\app\app-routing.module.ts

import {
    NgModule } from '@angular/core';
import {
   RouterModule, Routes} from "@angular/router";
import {
   HomeComponent} from "./home/home.component";
import {
   AppLayoutComponent} from "./app-layout/app-layout.component";
import {
   SelfieComponent} from "./selfie/selfie.component";
import {
   VerifyComponent} from "./verify/verify.component";
import {
   DocumentationComponent} from "./documentation/documentation.component";

const routes:Routes = [{
   
  path:'',
  component:AppLayoutComponent,
  children:[
    {
   path:'',component:HomeComponent},
    {
   path:'documentations',component:DocumentationComponent},
    {
   path:'selfie',component:SelfieComponent},
    {
   path:'verify',component:VerifyComponent},
  ]