【vscode插件开发】vscode->angular组件跳转、数据监听流程

摘要:
当我像天使一样发送数据时,数据丢失了!!!!继续查看事件发生的原因:1.在页面断点期间,我们可以发现在呈现工作项页面时调用了两次workItemInit事件,并将数据发送给了angel两次。初步推断,当第二数据覆盖第一数据时发生了什么。。。。

前言:

最近开发vscode的时候发现了一个很神奇的事情,vscode到angular的整个通信流程应该是 vscode请求数据-> 拿到数据发送给angular->angular监听数据并渲染页面,但是最神奇的事情来了!!!就是在我vscode像angular发送数据的时候数据竟然丢失了!!!!

如图可以看到,我在向angular发送数据前的时候,workitem.priority里还是有值的,但是在angular刚监听的时候,message.data里的priority就为undefined了,令我百思不得其解,这是为啥嘞???

【vscode插件开发】vscode->angular组件跳转、数据监听流程第1张

【vscode插件开发】vscode->angular组件跳转、数据监听流程第2张

那么再来说一说,当使用angular开发vscode组件的时候,angular应该如何监听vscode发来的事件,以及如何判断是进那个组件的

思路:

一、 全局监听

将监听vscode事件部分单独抽出来,并且在app.module.ts里面调用。单独发送init事件告知angular,此时用户触发的是哪个事件,应该对应的显示哪个组件,当进入组件时,在触发调用数据的事件,从而让vscode去发送事件请求向后端拿数据

二、 组件监听 (我采用的第二种,因为最开始就是分别监听的,但是推荐采用第一种方式~)

1. init事件只用来告知angular应该渲染那个页面,不发送数据!!!(优点:这样即便多个组件触发了init事件也不会导致数据丢失或重置)

2.首先在全局laoding.module.ts里监听init事件,来判断应该进入那个组件

逻辑:

1、 进入页面首先渲染loading

2、在loading里监听init事件,判断应该跳那个组件 (可以理解为你自己写了个路由组件,由你来判断跳转到那个组件)

3. 在组件里在分别调用work-item和my-profile数据

注意:因为我只有两个页面,所以组件跳转没有采用路由跳转,而是直接根据条件不同显示了不同的组件,页面多时推荐采用路由跳转的方式

说远了。。。。回归正题,所以到底是为什么导致数据丢失呢?而且要怎么解决呢? 继续往下看

发生的原因:

1、 页面断点时可以发现,工作项页渲染时调用了两次workItemInit事件, 发送了两次数据给angular,初步推断可能是第二次数据覆盖了第一次数据时发生了什么不可告人的事情。。。。

2、 触发两次workItemInit事件的原因是因为在工作项的页面里有两个组件分别调用了数据,并且我是采用继承的方式来传值的,所以导致触发了两次

解决方案:

1、 首先,把路由判断和数据分开传送, 避免数据被重复调用导致数据丢失

【vscode插件开发】vscode->angular组件跳转、数据监听流程第3张

2、在loading里全局监听vscodeRoute,判断跳转那个路由

更改后Angular里应该有三个位置监听

(1)loading用来监听vscodeRoute

(2)workitem用来监听workitem的数据 

(3) my-profile用来监听mu-profile的数据

【vscode插件开发】vscode->angular组件跳转、数据监听流程第4张

3、在angular中使用rxjs订阅流

1)以流的形式传递出去

【vscode插件开发】vscode->angular组件跳转、数据监听流程第5张

2)订阅流,获取数据----流只有被订阅了才会执行

【vscode插件开发】vscode->angular组件跳转、数据监听流程第6张

免责声明:文章转载自《【vscode插件开发】vscode->angular组件跳转、数据监听流程》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇jQuery Grid入门指南(1)Android学习笔记27:网格视图GridView的使用下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Visual Studio Code 的使用方法和技巧

VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验。 布局:左侧是用于展示所要编辑的所有文件和文件夹的文件管理器,依次是`资源管理器`,`搜索`,`GIT`,`调试`,`插件`,右侧是打开文件的编辑区域,最多可同时打开三个编辑区域到侧边。 底栏:依次是`Git Branch`,`error&wa...

一次SQLServer数据库宕机问题

数据库采用SQL Server 2005版本, 数据库文件约为6G,而LDF日志文件已经高达36G。 服务器开始变的不太稳定 。数据没有成功保存。 打开事件查看器发现很多信息日志 数据库 '' 中的文件 '_log' 的自动增长已由用户取消,或已在 30031 毫秒后超时。请使用 ALTER DATABASE 为此文件设置较小的 FILEGROWTH 值...

全国省市区县最全最新数据表(数据来源谷歌)

因为工作项目需求,需要一个城市县区数据表,上网搜了下,基本都不全,所以花了3天时间整理了一遍. 省市区县数据来源Google地图. (包括34个省 , 371个市, 2824个县区) /**********创建省级表**********/ CREATE TABLE T_Province ( ProID INT IDENTITY(1,1) PRIMARY...

数据库的常用日志

本章内容: 查询日志 慢查询日志 *** 错误日志 二进制日志 ***** 中继日志 事务日志 **** mariadb 日志文件默认路径:/var/lib/mysql 查询日志 数据库的查询日志记录了每一条sql语句; 访问量较大时建议不开启,因为设想一下如果同时又几百万个用户同时访问数据库,查询日志的记录就会占用大量的系统开销,直接影响服务器性...

Rabbitmq的死信

一、概述 死信有死信队列、死信交换器和死信消息组成。死信消息则有如下三种情况生成: 1.消费者使用basic.reject或 basic.nack并将requeue参数设置为false来拒绝该消息 2.消息设置了TTL过期时间,过期时间内没有消费导致过期 3.消息因超过队列长度导致被丢弃 如果队列删除或者队列的TTL过期时间到了被删除其中的消息是不会成为死...

Matlab读取Excel的数据

matlab读取excel中的数据用的是xlsread()这个函数这句代码跟matlab菜单操作中的file中import再选择excel文件的效果是一样的手动导入的时候它会自动识别文件中有什么类型的数据,数字和字符串被分别读入到两个变量中。比如[A B] = xlsread('1.xmls'); A中存储了这个文件中的数字矩阵,B中存储了字符串矩阵,读取...