Angular 2+ 路由触发滑入面板功能实现问题求助

• 若需要滑入面板为浮层、不覆盖原有主路由页面内容，推荐采用「路由事件监听+全局面板」的实现方案：
  1. 在根组件内定义面板显示状态变量，引入Router服务监听路由跳转事件，匹配slideinpanel路由时触发面板开启，路由切换到其他路径时触发关闭，示例代码如下：

  import { NavigationEnd, Router } from '@angular/router';
  import { filter } from 'rxjs';
  
  constructor(private router: Router) {}
  
  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.isPanelShow = event.urlAfterRedirects === '/slideinpanel';
    });
  }
  

  2. 引入Angular动画模块实现滑入效果，先在AppModule中导入BrowserAnimationsModule，再给面板组件配置动画触发器：

  // 面板组件的@Component元数据中新增动画配置
  animations: [
    trigger('slideInOut', [
      state('false', style({ transform: 'translateX(100%)' })),
      state('true', style({ transform: 'translateX(0)' })),
      transition('false <=> true', animate('300ms ease'))
    ])
  ]
  

  模板中绑定动画状态即可：

  <div class="slide-panel" [@slideInOut]="isPanelShow">
    <!-- 面板内部内容 -->
  </div>
  

• 若滑入面板是独立页面，直接将动画绑定到组件的:enter生命周期即可，和你最初在组件加载时触发开启的思路完全匹配，组件初始化时会自动触发滑入动画。

内容的提问来源于stack exchange，提问作者sonEtLumiere