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 这种解决方式,简单且全面。

欢迎点赞,关注和留言 🌹

参考

相关推荐
brzhang6 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止7 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms7 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登7 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in7 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4169 小时前
HTML面试题
前端·html
张可9 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课10 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿10 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我10 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法