Angular路由加载子组件数据变化的解决方案

该篇是介绍父组件接收子组件的数据变化 的一种方式,解决的场景比较特殊是子组件是通过路由填充加载的 ,就是<router-outlet> </router-outlet> + 路由加载,这种情况下正常思路使用双向绑定、 xChange 向上传递是行不通的,试过 @ViewChild() 方式也取不到子组件。

另一个点是 router-outlet 是根据路由变化加载不同加载组件的,说个场景:

  1. 当导航位于"表单设计"时,展示右侧保存按钮,并且内容区展示表单设计器,当点击公开发布时保存按钮会隐藏,会切换至公开表单的选项内容
  2. 当表单内容新增/修改/删除时,保证父组件保存的控件信息和设计器里的一致

路由配置是:

遇到这种情况,是有点费脑筋的,怎么解决呢?

解决方式

RouterOutlet activate 属性

这种方式是该篇介绍的主题,RouterOutlet activate 这个方式算是冷门

activate 挂载在 router-outlet 上的事件,当 router-outlet 占位的组件被激活时就会触发,事件返回的参数是子组件,使用如下:

html 复制代码
    <router-outlet (activate)="loadComponent($event)" (deactivate)="disconnectComponent($event)"></router-outlet>
typescript 复制代码
    loadComponent(component: ComponentType<any>) {
      	console.log('激活的组件:', component);
        if (component instanceof AppFormDesignerComponent) {
          this.plugins$ = component.pluginsChange.subscribe(result => {
          });
        }
      }
      disconnectComponent(component: ComponentType<any>) {
        console.log('取消激活的组件:', component);
        if (component instanceof AppFormDesignerComponent) {
          this.plugins$.unsubscribe();
        }
      }

子组件 AppFormDesignerComponent

typescript 复制代码
    pluginsChange = new EventEmitter<FormPluginInfo[]>();

    onPluginsChange(plugins: FormPluginInfo[]) {
       this.pluginsChange.emit(plugins);
    }

效果:

万能大法:中间层介入(RxJS)

哪里流传的那么一句话: 任何解决不了的问题都可以引入一个第三方去解决。

使用 Service 或 Store,声明 RxJS Subject,父组件去订阅 Subject,子组件发送数据变化。如果只是为了解决这一种场景,比起第一种,这种引入一个 Service 显然有点大材小用。 Ps:不写示例代码了,如果有需要,可以留言。

路由传递变化函数

可以在路由跳转的时候传递变化的函数,该函数绑定父组件的上下文并将写好逻辑委托给子组件,当子组件发生变化时执行一下,可以达到更新数据的效果。

路由守卫

第二种方式并不完美,一般来说 访问父组件的路由会自动跳转重定向到第一个菜单,这种情况还需要初始数据,在路由守卫里获取父/子的组件信息 ,没有去实践,越往深想好像越复杂,所以还是推荐用前两种方式吧。

最后

就以上场景而言,个人更倾向 RouterOutlet activate 这种解决方式,简单且全面。

欢迎点赞,关注和留言 🌹

参考

相关推荐
大西瓜瓜瓜2 分钟前
PS2020,将所有图片不剪切,调整为800×800像素的文档尺寸。
前端
sjin4 分钟前
React源码 - 大名鼎鼎的Fiber
前端
子兮曰6 分钟前
🚀从单体到Monorepo:四川省xxx协会官网架构重生记
前端·next.js·turbopack
白水清风10 分钟前
CI/CD学习记录(基于GitLab)
前端·自动化运维·前端工程化
齐杰拉11 分钟前
源码精读:拆解 ChatGPT 打字机效果背后的数据流水线
前端·chatgpt
文心快码BaiduComate20 分钟前
“一人即团队”——一句话驱动智能体团队
前端·后端·程序员
我是ed21 分钟前
# vue3 实现前端生成水印效果
前端
IAtlantiscsdn33 分钟前
Redis7底层数据结构解析
前端·数据结构·bootstrap
小枫编程34 分钟前
Spring Boot 与前端文件上传跨域问题:Multipart、CORS 与网关配置
前端·spring boot·后端
uhakadotcom1 小时前
入门教程:如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例)
前端·javascript·面试