CN111611314A - Angular-based synchronous refreshing method for different components on same page - Google Patents
Angular-based synchronous refreshing method for different components on same page Download PDFInfo
- Publication number
- CN111611314A CN111611314A CN202010437071.3A CN202010437071A CN111611314A CN 111611314 A CN111611314 A CN 111611314A CN 202010437071 A CN202010437071 A CN 202010437071A CN 111611314 A CN111611314 A CN 111611314A
- Authority
- CN
- China
- Prior art keywords
- component
- same page
- data
- components
- management component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000001360 synchronised effect Effects 0.000 title claims abstract description 29
- 238000000034 method Methods 0.000 title claims abstract description 24
- 230000008859 change Effects 0.000 claims description 11
- 230000004048 modification Effects 0.000 claims description 6
- 238000012986 modification Methods 0.000 claims description 6
- 238000007792 addition Methods 0.000 claims description 3
- 238000012217 deletion Methods 0.000 claims description 3
- 230000037430 deletion Effects 0.000 claims description 3
- 230000008569 process Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000003211 malignant effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/27—Replication, distribution or synchronisation of data between databases or within a distributed database system; Distributed database system architectures therefor
- G06F16/275—Synchronous replication
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/23—Updating
- G06F16/2365—Ensuring data consistency and integrity
Abstract
The invention discloses a synchronous refreshing method of different components on the same page based on Angular, and relates to the technical field. Aiming at a database instance deployed on a public cloud environment, the following steps are executed in a plurality of components contained in the same page by using the eventemiter class of Nodejs: 1) defining an Output in component 1 as an EventEmitter attribute, 2) emit the EventEmitter attribute after updating component 1 page data, 3) receiving the EventEmitter object in a parent component and defining an event handler in component 2 associated with component 1, 4) performing a flush in the event handler of component 2; after steps 1) -4) are executed, when the data of the component 1 changes, the data of the component 2 related to the component 1 on the same page is synchronously refreshed. The method can solve the problem that other components are updated synchronously when the content of different components on the same page is changed.
Description
Technical Field
The invention relates to a front-end Angular technical framework, in particular to a synchronous refreshing method of different components on the same page based on Angular.
Background
In the current background of cloud computing and big data, data of modern enterprises and governments are developing towards large capacity, wherein databases have more and more weight in data, business algorithms and analysis statistics. The management and protection of databases becomes especially important under the warning of the constant burst of malignant events such as user data outgoing, enterprise business secret disclosure, hacking damage and the like. When the number of database instances in the cloud environment is large, management work for the database instances is complex, setting of authority by people can reduce working efficiency, and risk of human misoperation can be increased.
With the increasing of users, the functions of cloud databases are enriched continuously, database management functions and account management functions of cloud database instances are carried forward, data can grow continuously in the operation process of databases related to the cloud databases, and the problem of asynchronous data updating can occur when a user operates data authorities or account authorities in the access process, so that the use difficulty and misunderstanding of the user are caused.
In order to avoid the problem that the use experience of the user is poor due to the inconsistency of the data, in this case, synchronous refreshing between different components on the same page needs to be realized.
Disclosure of Invention
Aiming at the requirements and the defects of the prior art development, the invention provides a synchronous refreshing method of different components on the same page based on Angular, which is used for solving the problem that other components are synchronously updated when the content of different components on the same page is changed.
The invention relates to a synchronous refreshing method of different components on the same page based on Angular, which adopts the following technical scheme for solving the technical problems:
a synchronous refreshing method of different components on the same page based on Angular uses the eventemiterer class of Nodejs aiming at a database instance deployed on a public cloud environment, and executes the following steps in a plurality of components contained in the same page:
1) an Output is defined in component 1 as the eventemiter attribute,
2) after the component 1 page data is updated, emit the eventemiter attribute,
3) the eventemiter object is received in the parent component, and an event handler is defined in component 2 associated with component 1,
4) a flush is performed in the event handler of component 2,
after steps 1) -4) are executed, when the data of the component 1 changes, the data of the component 2 related to the component 1 on the same page is synchronously refreshed.
In particular, the component 2 involved is any other component associated with component 1 on the same page.
More specifically, in a plurality of components contained in the same page, two components are arbitrarily selected and steps 1) -4) are respectively executed, so that synchronous refreshing of the associated contents of the two components can be realized.
Preferably, the page includes, but is not limited to, a database management component and an account management component, and when synchronous refresh of the database management component and the account management component on the same page is completed, the following steps are performed:
first of all, the first step is to,
A1) an Output is defined in the database management component as the eventemiter attribute,
A2) after the database management component data is updated, emit the eventemiter attribute,
A3) the eventemiter object is received in the parent component overview page, and an event handler is defined in the account management component,
A4) a refresh is performed in the event handler of the account management component,
when the data of the database management component is changed, the account management component on the same page is synchronously refreshed in relation to the data of the database management component;
secondly, the first step is to carry out the first,
B1) an Output is defined in the account management component as the eventemiter attribute,
B2) after the data of the account management component is updated, emit is the eventemiter attribute,
B3) the eventemiter object is received in the parent component overview page, and event handlers are defined in the database management component,
B4) a flush is performed in the event handler of the database management component,
and when the data of the account management component is changed, the database management component on the same page synchronously refreshes the data related to the account management component.
More specifically, on the same page, when the data of the component 1 changes, other components associated with the component 1 are synchronously refreshed, and meanwhile, notes are generated on the other components, and the generated notes are used for explaining specific situations of the content of the component, which is synchronously refreshed, where the specific situations include a data change source, data change time, and content before data change.
More specifically, on the same page, when the data of the component 1 changes, the other components associated with the component 1 are synchronously refreshed, and simultaneously, the content of the other components which are synchronously refreshed is highlighted.
Preferably, the remarks generated by the other components are displayed when the refreshed content on the other components is clicked.
Preferably, changes to the component data include, but are not limited to, modifications, additions, deletions.
Compared with the prior art, the synchronous refreshing method of different components on the same page based on Angular has the following beneficial effects:
the invention uses the eventemiter class of Nodejs aiming at the database instance deployed on the public cloud environment to solve the problem of synchronous updating of other components when the content of different components on the same page is changed, ensures the consistency of data among the pages, avoids the condition that a user reads dirty data, ensures the safety in the operation process and meets the requirement of the user on using the system.
Drawings
FIG. 1 is a flow chart of a method according to a first embodiment of the present invention.
Detailed Description
In order to make the technical scheme, the technical problems to be solved and the technical effects of the present invention more clearly apparent, the following technical scheme of the present invention is clearly and completely described with reference to the specific embodiments.
The first embodiment is as follows:
with reference to fig. 1, the present embodiment provides a synchronous refresh method for different components on the same page based on Angular, and for a database instance deployed in a public cloud environment, the following steps are performed in multiple components included in the same page by using the eventemiter class of nodjs:
1) an Output is defined in component 1 as the eventemiter attribute,
2) after the component 1 page data is updated, emit the eventemiter attribute,
3) the eventemiter object is received in the parent component, and an event handler is defined in component 2 associated with component 1,
4) a flush is performed in the event handler of component 2,
in this embodiment, component 1 and component 2 are any two associated components belonging to the same page. After steps 1) -4) are executed, when the data of the component 1 changes, the data of the component 2 related to the component 1 on the same page is synchronously refreshed.
The present embodiment enables the refreshing of data contained by component 1 in the associated component 2.
Example two:
the embodiment provides a synchronous refreshing method of different components on the same page based on Angular, aiming at a database instance deployed in a public cloud environment, an eventemiter class of Nodejs is used, and when the same page includes but is not limited to a database management component and an account management component and synchronous refreshing of the database management component and the account management component on the same page is completed, the following steps are executed:
first of all, the first step is to,
A1) an Output is defined in the database management component as the eventemiter attribute,
A2) after the database management component data is updated, emit the eventemiter attribute,
A3) the eventemiter object is received in the parent component overview page, and an event handler is defined in the account management component,
A4) a refresh is performed in the event handler of the account management component,
when the data of the database management component is changed, the account management component on the same page is synchronously refreshed in relation to the data of the database management component;
secondly, the first step is to carry out the first,
B1) an Output is defined in the account management component as the eventemiter attribute,
B2) after the data of the account management component is updated, emit is the eventemiter attribute,
B3) the eventemiter object is received in the parent component overview page, and event handlers are defined in the database management component,
B4) a flush is performed in the event handler of the database management component,
and when the data of the account management component is changed, the database management component on the same page synchronously refreshes the data related to the account management component.
The embodiment executes the steps a1) -a4) to realize the refresh of the data contained in the database management component in the associated account management component, and further executes the steps B1) -B4) to realize the refresh of the data contained in the account management component in the associated database management component. In short, the embodiment finally realizes synchronous refresh of two associated components, namely the database management component and the account management component on the same page by executing the steps A1) -A4) and the steps B1) -B4).
Example three:
according to embodiment one, component 2 is any other component associated with component 1 on the same page.
On the same page, when the data of the component 1 changes, other components related to the component 1 are synchronously refreshed, and meanwhile, notes are generated on the other components, wherein the generated notes are used for explaining the specific conditions of the content synchronously refreshed on the component, and the specific conditions comprise a data change source, data change time and the content before data change. When the refreshed content on other components is clicked, the remarks generated by other components are displayed.
On the same page, when the data of the component 1 changes, the other components associated with the component 1 are synchronously refreshed, and simultaneously, the content of the other components which are synchronously refreshed is highlighted.
In this embodiment, the change of the component data includes, but is not limited to, modification, addition, and deletion.
Through the embodiment, the refreshing of any related component on the same page can be known in detail, so that a modification source can be found quickly, and the situation that related data modification personnel cannot be found when the data contained in a certain component is modified is avoided.
In summary, the synchronous refreshing method of different components on the same page based on Angular can solve the problem that when the content of different components on the same page changes, other components are updated synchronously.
The principles and embodiments of the present invention have been described in detail using specific examples, which are provided only to aid in understanding the core technical content of the present invention. Based on the above embodiments of the present invention, those skilled in the art should make any improvements and modifications to the present invention without departing from the principle of the present invention, and therefore, the present invention should fall into the protection scope of the present invention.
Claims (8)
1. The utility model relates to a synchronous refresh method of different components on the same page based on Angular, which is characterized in that for the database instance deployed on the public cloud environment, the EventEmitter class of Nodejs is used, in the multiple components contained in the same page, the following steps are executed:
1) an Output is defined in component 1 as the eventemiter attribute,
2) after the component 1 page data is updated, emit the eventemiter attribute,
3) the eventemiter object is received in the parent component, and an event handler is defined in component 2 associated with component 1,
4) a flush is performed in the event handler of component 2,
after steps 1) -4) are executed, when the data of the component 1 changes, the data of the component 2 related to the component 1 on the same page is synchronously refreshed.
2. The Angular-based synchronous refresh method for different components on the same page, according to claim 1, wherein component 2 is any other component associated with component 1 on the same page.
3. The Angular-based synchronous refreshing method for different components on the same page, according to claim 2, wherein in the plurality of components included in the same page, two components are arbitrarily selected and steps 1) -4) are respectively executed, so that synchronous refreshing of the associated contents of the two components can be realized.
4. The Angular-based synchronous refreshing method for different components on the same page according to claim 3, wherein the page includes but is not limited to a database management component and an account management component, and when the synchronous refreshing of the database management component and the account management component on the same page is completed, the following steps are executed:
first of all, the first step is to,
A1) an Output is defined in the database management component as the eventemiter attribute,
A2) after the database management component data is updated, emit the eventemiter attribute,
A3) the eventemiter object is received in the parent component overview page, and an event handler is defined in the account management component,
A4) a refresh is performed in the event handler of the account management component,
when the data of the database management component is changed, the account management component on the same page is synchronously refreshed in relation to the data of the database management component;
secondly, the first step is to carry out the first,
B1) an Output is defined in the account management component as the eventemiter attribute,
B2) after the data of the account management component is updated, emit is the eventemiter attribute,
B3) the eventemiter object is received in the parent component overview page, and event handlers are defined in the database management component,
B4) a flush is performed in the event handler of the database management component,
and when the data of the account management component is changed, the database management component on the same page synchronously refreshes the data related to the account management component.
5. The Angular-based synchronous refreshing method for different components on the same page as claimed in claim 2, wherein when data of component 1 changes on the same page, other components associated with component 1 are synchronously refreshed, and meanwhile, remarks are generated on other components, and the generated remarks are used for explaining specific situations of the content of the component, where the content of the component is synchronously refreshed, where the specific situations include a data change source, a data change time, and a content before the data change.
6. The Angular-based synchronous refreshing method for different components on the same page according to claim 5, wherein when data of component 1 changes on the same page, synchronous refreshing occurs on other components associated with component 1, and simultaneously, the content of synchronous refreshing occurs on other components is highlighted.
7. The Angular-based synchronous refreshing method for different components on the same page, according to claim 5, wherein notes generated by other components are displayed only when the refreshed content on other components is clicked.
8. The Angular-based synchronous refresh method for different components on the same page as in claim 1, wherein the change of component data includes and is not limited to modification, addition and deletion.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010437071.3A CN111611314A (en) | 2020-05-21 | 2020-05-21 | Angular-based synchronous refreshing method for different components on same page |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010437071.3A CN111611314A (en) | 2020-05-21 | 2020-05-21 | Angular-based synchronous refreshing method for different components on same page |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111611314A true CN111611314A (en) | 2020-09-01 |
Family
ID=72195776
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010437071.3A Pending CN111611314A (en) | 2020-05-21 | 2020-05-21 | Angular-based synchronous refreshing method for different components on same page |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111611314A (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103166916A (en) * | 2011-12-12 | 2013-06-19 | 深圳市金蝶中间件有限公司 | Method and system for updating page |
| CN111078220A (en) * | 2019-12-19 | 2020-04-28 | 浪潮云信息技术有限公司 | Method and system for implementing front-end state change management |
-
2020
- 2020-05-21 CN CN202010437071.3A patent/CN111611314A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103166916A (en) * | 2011-12-12 | 2013-06-19 | 深圳市金蝶中间件有限公司 | Method and system for updating page |
| CN111078220A (en) * | 2019-12-19 | 2020-04-28 | 浪潮云信息技术有限公司 | Method and system for implementing front-end state change management |
Non-Patent Citations (2)
| Title |
|---|
| SMART_DREAM: ""Angular知识点】通过服务实现组件之间的通信EventEmitter"" * |
| 柳源居士: ""Angular 父组件监听子组件事件--by EventEmitter"" * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9514217B2 (en) | Message index subdivided based on time intervals | |
| DE112012005037B4 (en) | Manage redundant immutable files using deduplications in storage clouds | |
| US9069818B2 (en) | Textual search for numerical properties | |
| CN105069109B (en) | A kind of method and system of distributed data base dilatation | |
| CN104134173A (en) | Main and distribution network graph/model/data integrated system based on remote retrieval and information interaction | |
| CN110674154A (en) | Spark-based method for inserting, updating and deleting data in Hive | |
| CN107665246B (en) | Dynamic data migration method based on graph database and graph database cluster | |
| CN112445863A (en) | Real-time data synchronization method and system | |
| CN106648994A (en) | Method, equipment and system for backup operation on log | |
| CN109902117A (en) | Operation system analysis method and device | |
| CN115033575A (en) | Data query method, device, equipment and storage medium | |
| CN111125284A (en) | Integrated space-time big data and geographic information public service cloud platform | |
| CN113468149B (en) | Data model development platform | |
| US11036761B1 (en) | Configurable database management | |
| CN111611314A (en) | Angular-based synchronous refreshing method for different components on same page | |
| CN110941422B (en) | Code automatic generation method, code generator and readable storage medium | |
| CN107273443A (en) | A kind of hybrid index method based on big data model metadata | |
| CN104331426B (en) | A kind of method for quickly retrieving of the electric system searcher based on browser | |
| CN114625743A (en) | Data updating method and device for personnel master data and electronic equipment | |
| US11093504B2 (en) | Server-side cross-model measure-based filtering | |
| CN113468340A (en) | Construction system and construction method of industrial knowledge map | |
| Ooju et al. | TripleFetchQL: A Platform for Integrating Relational and NoSQL Databases | |
| US20230334068A1 (en) | Data processing method and apparatus thereof, electronic device, and computer-readable storage medium | |
| CN112561368A (en) | Visual achievement calculation method and device of OA examination and approval system | |
| Hong | Research on Design of Online Integration System of Multimedia Database Based on Artificial Intelligence |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200901 |