Sub-component communication method and device based on Angular parent component, equipment and storage medium

Abstract

The invention discloses a child component communication method, device and equipment based on an Angular parent component and a storage medium, relates to the technical field of computers, is applied to a parent component, and comprises the following steps: constructing a first child component comprising a first data transmission interface and a second child component comprising a second data transmission interface based on a template file corresponding to the parent component; when it is monitored that the data updating operation exists in the first sub-component, calling the first sub-component, packaging an updating event and updating data of the data updating operation by using a data packaging algorithm to obtain event parameters, and transmitting the event parameters to the parent component through the first data transmission interface; and receiving and verifying the event parameter, after verification is passed, judging whether the data sharing state of the parent component meets a preset state updating condition based on a preset demand, if so, updating the data sharing state, and transmitting the event parameter to the second sub-component through a preset data transmission mode and a second data transmission interface. Therefore, the data updating efficiency can be improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a sub-component communication method, device, equipment and storage medium based on an Angular parent component. Background Art

[0002] Currently, Angular-based front-end application development uses multiple components to implement the application. A component-based architecture is used to break down the interface into independent, reusable components, improving development efficiency and code maintainability. However, when data dependencies exist between two components of the same level (i.e., child components of the same parent component), if the data in one component is updated without a corresponding update in the other, inconsistent data display will occur. Traditional solutions involve directly coupled component communication, which increases code complexity and reduces maintainability.

[0003] As can be seen from the above, how to improve the efficiency of data update in the process of child component communication based on Angular parent component is an urgent problem to be solved. Summary of the Invention

[0004] In view of this, the purpose of the present invention is to provide a method, apparatus, device, and storage medium for communicating between sub-components based on an Angular parent component, which can improve the efficiency of updating data during the communication between sub-components based on an Angular parent component, thereby improving the synchronization and efficiency of the production process. The specific solution is as follows:

[0005] In a first aspect, the present application provides a sub-component communication method based on an Angular parent component, which is applied to the parent component and includes:

[0006] Constructing a first subcomponent including a first data transmission interface and a second subcomponent including a second data transmission interface based on a template file corresponding to the parent component; the first subcomponent and the second subcomponent are both subcomponents of the parent component;

[0007] When a data update operation is detected in the first sub-component, the first sub-component is called and the update event corresponding to the data update operation and the update data are encapsulated using a data encapsulation algorithm to obtain event parameters, which are then transmitted to the parent component through the first data transmission interface; the data encapsulation algorithm is a data encapsulation algorithm determined based on a preset decorator;

[0008] Call the preset event processing function to receive and verify the event parameters, and after the verification is passed, determine whether the data sharing status corresponding to the parent component meets the preset status update conditions based on the preset requirements. If so, update the data sharing status and transmit the event parameters to the second sub-component through the preset data transmission method and the second data transmission interface, so that the second sub-component updates the current view display information based on the event parameters.

[0009] Optionally, constructing the first subcomponent including the first data transmission interface and the second subcomponent including the second data transmission interface based on the template file corresponding to the parent component includes:

[0010] Generate parent component information based on a preset component generation process in Angular, and generate a component structure based on a component structure generation command in Angular, so as to generate a parent component based on the parent component information and the component structure; wherein the parent component information includes a template file, a logic file, and a style file corresponding to the parent component;

[0011] Determining a rendering position corresponding to a subcomponent based on the template file and preset requirements using a preset subcomponent selector, and determining a layout position of the subcomponent based on the rendering position; the layout position includes a parallel layout and a column layout;

[0012] A first subassembly including a first data transmission interface and a second subassembly including a second data transmission interface are constructed based on the layout position.

[0013] Optionally, when a data update operation is detected in the first subcomponent, calling the first subcomponent and encapsulating the update event corresponding to the data update operation with the update data using a data encapsulation algorithm to obtain event parameters, and transmitting them to the parent component through the first data transmission interface includes:

[0014] Calling a preset decorator and determining a data encapsulation algorithm based on the first target class, and setting the second target class as the event to be monitored in the first subcomponent; wherein the first target class is a class for managing event emission and subscription; the first target class is a class for data exchange determined based on preset requirements;

[0015] The event to be monitored is monitored using a preset event binding syntax, so that when a data update operation is detected in the first sub-component, the first sub-component is called to determine the update event and update data corresponding to the data update operation, and then the first sub-component is called to encapsulate the update event and the update data based on the data encapsulation algorithm to obtain event parameters, and transmit them to the parent component through the first data transmission interface;

[0016] The event parameter is a structured parameter object including a key identifier and a data value entity. The key identifier is used to distinguish data types; and the data value entity includes business data to be synchronized.

[0017] Optionally, the calling of a preset event processing function receives and verifies the event parameters, and after the verification passes, determines whether the data sharing state corresponding to the parent component meets a preset state update condition based on preset requirements; if so, updates the data sharing state, and transmits the event parameters to the second sub-component through a preset data transmission method and the second data transmission interface, including:

[0018] Calling a preset event processing function to receive the event parameters, parsing the event parameters to obtain a data value entity corresponding to the event parameters, and then performing validity verification on the data value entity to obtain a verification result; the validity verification includes checking the integrity of the data format and the compliance of the value range;

[0019] If the verification result indicates that the verification is passed, the data value entity is stored in the shared state temporary storage area in the parent component, and then a judgment result is obtained based on the preset requirements to determine whether the data sharing state corresponding to the shared state temporary storage area meets the preset state update condition;

[0020] If the judgment result indicates that the data sharing state meets the preset state update condition, the data value entity in the shared state temporary area is transferred to the second subcomponent through the second data transmission interface using the preset input attribute binding channel method or the preset call channel method.

[0021] Optionally, using a preset input attribute binding channel method to transfer the data value entity in the shared state temporary storage area to the second subcomponent through the second data transmission interface includes:

[0022] Determining an input attribute corresponding to the second subcomponent, and determining a state variable corresponding to the input attribute based on the input attribute, and then assigning the data value entity in the shared state temporary area to the state variable to obtain an assignment result;

[0023] Call the input attribute change response mechanism in the second sub-component to perform data loading operations and view update operations on the assignment result to obtain a first processing result, and pass the first processing result to the first sub-component through the second data transmission interface, so that the first sub-component can change the code corresponding to the second sub-component based on the first processing result to obtain a new second sub-component.

[0024] Optionally, using a preset calling channel method to transfer the data value entity in the shared state temporary storage area to the second subcomponent through the second data transmission interface includes:

[0025] Obtaining a reference identifier of a component instance corresponding to the second subcomponent using a preset instance template, and calling an update execution method corresponding to the second subcomponent based on the reference identifier, so as to construct a new update execution method based on the update execution method and the data value entity in the shared state temporary storage area;

[0026] The update execution method is used to trigger the preset data processing flow and view rendering operation in the second sub-component to obtain a second processing result, and the second processing result is passed to the second sub-component through the second data transmission interface, so that the second sub-component can change the code corresponding to the second sub-component based on the second processing result to obtain a new second sub-component.

[0027] Optionally, after transmitting the event parameters to the second sub-component through the preset data transmission method and the second data transmission interface so that the second sub-component updates the current view display information based on the event parameters, the method further includes:

[0028] When a data update operation is detected in the second sub-component, the second sub-component is called and the update event corresponding to the data update operation and the update data are encapsulated using the data encapsulation algorithm determined based on the preset decorator to obtain event parameters, and the event parameters are transmitted back to the parent component through the second data transmission interface;

[0029] The target sub-component is dynamically selected based on the component identifier corresponding to the event parameter by utilizing the preset event source arbitration mechanism, and the event parameter is transmitted to the target sub-component through the data transmission interface corresponding to the target sub-component, so that the target sub-component performs a data synchronization operation based on the event parameter to obtain a new first sub-component.

[0030] In a second aspect, the present application provides a sub-component communication device based on an Angular parent component, which is applied to the parent component and includes:

[0031] a subcomponent construction module, configured to construct, based on a template file corresponding to the parent component, a first subcomponent including a first data transmission interface and a second subcomponent including a second data transmission interface; the first subcomponent and the second subcomponent are both subcomponents of the parent component;

[0032] an event parameter determination module, configured to, upon detecting a data update operation in the first subcomponent, call the first subcomponent and encapsulate the update event and update data corresponding to the data update operation using a data encapsulation algorithm, obtain event parameters, and transmit the obtained event parameters to the parent component via the first data transmission interface; the data encapsulation algorithm is a data encapsulation algorithm determined based on a preset decorator;

[0033] An event parameter verification module is used to call a preset event processing function to receive and verify the event parameters, and after the verification is passed, determine whether the data sharing status corresponding to the parent component meets the preset status update conditions based on the preset requirements. If so, the data sharing status is updated, and the event parameters are transmitted to the second sub-component through the preset data transmission method and the second data transmission interface, so that the second sub-component updates the current view display information based on the event parameters.

[0034] In a third aspect, the present application provides an electronic device, comprising:

[0035] Memory, used to store computer programs;

[0036] A processor is used to execute the computer program to implement the aforementioned sub-component communication method based on the Angular parent component.

[0037] In a fourth aspect, the present application provides a computer-readable storage medium for storing a computer program, wherein the computer program, when executed by a processor, implements the aforementioned sub-component communication method based on an Angular parent component.

[0038] As can be seen from the above, before the child component communication based on the Angular parent component is carried out, the present application needs to construct a first child component including a first data transmission interface and a second child component including a second data transmission interface based on the template file corresponding to the parent component; when a data update operation is detected in the first child component, the first child component is called and the data encapsulation algorithm is used to encapsulate the update event and the update data corresponding to the data update operation to obtain event parameters, and transmit them to the parent component through the first data transmission interface; the preset event processing function is called to receive and verify the event parameters, and after the verification is passed, it is judged based on the preset requirements whether the data sharing status corresponding to the parent component meets the preset status update conditions. If so, the data sharing status is updated, and the event parameters are transmitted to the second child component through the preset data transmission method and the second data transmission interface, so that the second child component updates the current view display information based on the event parameters.

[0039] It can be seen that this application first needs to construct a first subcomponent including a first data transmission interface and a second subcomponent including a second data transmission interface based on the template file corresponding to the parent component; then, when a data update operation is detected in the first subcomponent, the first subcomponent is called and the data encapsulation algorithm is used to encapsulate the update event and update data corresponding to the data update operation to obtain event parameters, and transmit them to the parent component through the first data transmission interface; then, the preset event processing function is called to receive and verify the event parameters, and after the verification is passed, it is determined based on the preset requirements whether the data sharing status corresponding to the parent component meets the preset status update conditions. If it meets the conditions, the data sharing status is updated, and finally, the event parameters are transmitted to the second subcomponent through the preset data transmission method and the second data transmission interface, so that the second subcomponent updates the current view display information based on the event parameters. In this way, the efficiency of updating data is improved in the communication process of subcomponents based on the Angular parent component, thereby improving the synchronization and efficiency of the production process. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are merely embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0041] Figure 1 This is a flow chart of a sub-component communication method based on an Angular parent component disclosed in this application;

[0042] Figure 2 This is a flowchart of a specific sub-component communication method based on Angular parent components disclosed in this application;

[0043] Figure 3 This is a schematic diagram of the structure of a sub-component communication device based on an Angular parent component disclosed in this application;

[0044] Figure 4 This is a structural diagram of an electronic device disclosed in this application. DETAILED DESCRIPTION

[0045] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0046] Currently, in the development of front-end applications based on Angular, multiple components are used to complete the implementation of the application. Among them, the componentized architecture is used to decompose the interface into independent and reusable components to improve development efficiency and code maintainability. However, when there is a data dependency relationship between two components of the same level (i.e., child components of the same parent component), if the data between the two components has a dependency relationship, after the data of one component is updated, if the data of the other component is not updated accordingly, inconsistent data display will occur. In traditional solutions, directly coupled component communication will lead to increased code complexity and decreased maintainability. To this end, the present application provides a child component communication method based on an Angular parent component, which can improve the efficiency of data updates in the child component communication process based on an Angular parent component.

[0047] See also Figure 1 As shown, an embodiment of the present invention discloses a sub-component communication method based on an Angular parent component, which is applied to the parent component and includes:

[0048] Step S11: construct a first subcomponent including a first data transmission interface and a second subcomponent including a second data transmission interface based on a template file corresponding to the parent component; the first subcomponent and the second subcomponent are both subcomponents of the parent component.

[0049] In this embodiment, in the process of communicating with a parent component based on Angular (a front-end framework developed by Google for building single-page applications), the embodiment of the present application constructs an architecture including a parent component, a child component, an information sending center, and an information receiving center. The above architecture is used to build an indirect communication link from the child component to the parent component and then to the child component, and the schematic diagram is as follows: Figure 2 It is worth mentioning that the design concept of the embodiment of the present application is based on the "mediator pattern" and uses the parent component to uniformly manage the interaction logic of the child components to avoid direct dependencies between components at the same level, thereby reducing the system coupling.

[0050] Furthermore, the child component is responsible for encapsulating independent business logic, and exposing data update events to the parent component through EventEmitter (i.e., event emitter), and setting the parent component as the communication hub, so that the parent component can monitor the event emission of the child component, and then coordinate and trigger the other child component to perform data update operations according to the business logic. The information sending center is used to implement one-way event transmission from the child component to the parent component, and the information receiving module is used to implement the parent component to monitor, capture and process events to complete data synchronization across child components. In this way, the embodiment of the present application ensures the lightweight and high compatibility of the solution by utilizing the native component communication mechanism based on Angular without introducing an additional state management library, and is suitable for peer component scenarios with clear data dependencies and relatively simple interaction logic.

[0051] It is worth mentioning that the parent component is the core hub of the entire communication system in the embodiment of this application. Its core functions include: carrying and organizing two sub-components with data dependencies, defining the listening logic and data transfer rules of sub-component events; coordinating the life cycle of sub-components to ensure that data update operations are executed at the right time.

[0052] Furthermore, in a specific embodiment, in Angular, the creation of a parent component follows a standard component generation process: First, the embodiment of the present application can quickly generate a component structure including a template file (.html, HyperText Markup Language), a logic file (.ts, TypeScript, a computer language), and a style file (.css, Cascading Style Sheets) through the Angular CLI (Angular Command Line Interface, i.e., Angular command line interface) command ng generate component component_parent. Among them, in the logic file, the parent component does not need to implement complex business logic, but only needs to complete the reference declaration and event handling function definition of the child component. In addition, in the template file of the parent component, the embodiment of the present application can quickly generate a component structure including a template file (.html, HyperText Markup Language, Hypertext Markup Language), a logic file (.ts, TypeScript, i.e., a computer language), and a style file (.css, Cascading Style Sheets, i.e., Cascading Style Sheets). <app-component-first> 、 <app-component-second>Declare the rendering position of the component. In addition, the layout of the sub-components can be flexibly adjusted according to business requirements, such as side-by-side layout, column layout, or conditional rendering. However, the core is to ensure that the parent component can access the instances or event interfaces of both sub-components simultaneously.

[0053] Specifically, constructing a first sub-component including a first data transfer interface and a second sub-component including a second data transfer interface based on a template file corresponding to the parent component may include: generating parent component information based on a preset component generation process in Angular, and generating a component structure based on a component structure generation command in Angular to generate a parent component based on the parent component information and the component structure; where the parent component information includes a template file, a logic file, and a style file corresponding to the parent component; using a preset sub-component selector and based on the template file and preset requirements to determine the rendering position corresponding to the sub-component, and determining the layout position of the sub-component based on the rendering position; the layout position includes side-by-side layout and column layout; constructing a first sub-component including a first data transfer interface and a second sub-component including a second data transfer interface based on the layout position.

[0054] In a specific implementation, the front-end code for constructing the sub-component is as follows:

[0055] <!-- Example of the parent component template: Display two sub-components side by side -->

[0056]

[0057]

[0058] <app-component-first>< / app-component-first> <!-- Sub-component A -->

[0059]

[0060]

[0061] <app-component-second>< / app-component-second> <!-- Sub-component B -->

[0062]

[0063]

[0064] Step S12: When it is monitored that there is a data update operation in the first sub-component, call the first sub-component and use a data encapsulation algorithm to encapsulate the update event and update data corresponding to the data update operation to obtain event parameters, and transmit them to the parent component through the first data transfer interface; the data encapsulation algorithm is a data encapsulation algorithm determined based on a preset decorator.

[0065] In this embodiment, in Angular, the @Output decorator is used to expose the events of the child component to the parent component, and EventEmitter is a class specifically used to manage event emission and subscription. The embodiment of the present application realizes a one-way communication channel between the child component and the parent component by combining and using the two. Among them, the @Output decorator is used to mark a class attribute as an output event to allow the parent component to listen to the event through event binding syntax, such as (eventName)="handler()"; for the EventEmitter instance, the embodiment of the present application can provide an emit() method to trigger the event using the above method, and can carry any type of parameters (such as data objects, status identifiers), and the parent component can receive these parameters through the event handling function. In the child component, each scenario that needs to trigger data update (such as user operation, asynchronous data loading completion) should call the EventEmitter.emit() method to pass the update event and related data to the parent component.

[0066] It is worth mentioning that the implementation method of the parent component to monitor events will vary based on the different events. The parent component can monitor the event emission of the child component by determining the child component tag and using the event binding syntax based on the child component tag, such as (dataUpdated)="onChildUpdate($event)") to implement symmetrical event handling functions according to the triggering direction of the child component data update. In a specific embodiment, when monitoring the event of child component A, that is, when the data of child component A is updated, the triggered function is the onFirstComponentUpdate function, and when monitoring the event of child component B, that is, when the data of child component B is updated, the onSecondComponentUpdate function is triggered.

[0067] Specifically, when it is monitored that there is a data update operation in the first sub-component, the first sub-component is called and the update event corresponding to the data update operation and the update data are encapsulated by using a data encapsulation algorithm to obtain event parameters, and the event parameters are transmitted to the parent component through the first data transmission interface, which may include: calling a preset decorator and determining a data encapsulation algorithm based on the first target class, and setting the second target class as the event to be monitored in the first sub-component; wherein, the first target class is a class for managing event emission and subscription; the first target class is a class for data exchange determined based on preset requirements; using a preset event binding syntax to monitor the event to be monitored, so that when it is monitored that there is a data update operation in the first sub-component, the first sub-component is called to determine the update event and the update data corresponding to the data update operation, and then the first sub-component is called and the update event and the update data are encapsulated based on the data encapsulation algorithm to obtain event parameters, and the event parameters are transmitted to the parent component through the first data transmission interface; wherein, the event parameters are structured parameter objects including a key name identifier and a data value entity, and the key name identifier is used to distinguish data types; the data value entity contains business data to be synchronized.

[0068] In a specific implementation manner, the code for using the event binding syntax based on the sub-component label is as follows: <!-- Event binding in the parent component template -->

[0069] <app-component-first (dataupdated)="onFirstComponentUpdate($event)">< / app-component-first>

[0070] <app-component-second (dataupdated)="onSecondComponentUpdate($event)">< / app-component-second>

[0071] <!-- Event binding in the parent component template -->

[0072] Step S13: Call a preset event handling function to receive and verify the event parameters, and after the verification passes, determine whether the data sharing state corresponding to the parent component meets the preset state update condition based on preset requirements. If it meets, update the data sharing state, and transmit the event parameters to the second sub-component through a preset data transmission method and the second data transmission interface, so that the second sub-component updates the current view display information based on the event parameters.

[0073] In this embodiment, when the parent component receives an update event from the sub-component, the following operations need to be performed on the received data: Data parsing and verification: Perform business logic verification on the parameters carried by the event, such as data format check and permission verification, to ensure that legal data enters the subsequent process; Data state synchronization: Determine whether it maintains a shared state. If so, it can decide whether to update the shared state it maintains according to business requirements, and pass the data to another sub-component. Subsequently, trigger the data update logic of the sub-component by calling the public method of another sub-component or updating its input attribute (@Input).

[0074] Specifically, call the preset event handling function to receive and verify event parameters. After passing the verification, based on the preset requirements, determine whether the data sharing status of the parent component meets the preset status update conditions. If it meets, update the data sharing status, and transmit the event parameters to the second sub-component through the preset data transmission method and the second data transmission interface, which may include: calling the preset event handling function to receive the event parameters, parsing the event parameters to obtain a data value entity corresponding to the event parameters, and then performing validity verification on the data value entity to obtain a verification result; the validity verification includes checking the integrity of the data format and the compliance of the numerical range; if the verification result indicates that the verification is passed, store the data value entity in the shared status temporary storage area in the parent component, and then based on the preset requirements, determine whether the data sharing status corresponding to the shared status temporary storage area meets the preset status update conditions to obtain a judgment result; if the judgment result indicates that the data sharing status meets the preset status update conditions, use the preset input attribute binding channel method or the preset call channel method to pass the data value entity in the shared status temporary storage area to the second sub-component through the second data transmission interface.

[0075] In a specific implementation manner, taking the example that the parent component notifies the second sub-component after the first sub-component is updated, the core logic corresponding to the code is as follows:

[0076] <!--Code for the parent component to notify the second sub-component after the first sub-component is updated-->

[0077] export class ComponentParentComponent {

[0078] / / If you need to directly call the method of the second sub-component, you need to obtain the instance through a template reference (you need to add #secondComponent in the template)

[0079] / / secondComponent!: ComponentSecondComponent;

[0080] onFirstComponentUpdate(eventData: { key: string; value: any}) {

[0081] / / 1. Data verification: Ensure that the transmitted data conforms to the expected format of the second sub-component

[0082] if (!this.isValidData(eventData.value)) {

[0083] console.warn('Invalid data, terminate the synchronization process');

[0084] return;

[0085] }

[0086] / / The parent component can choose to temporarily store shared data (not required, depending on business complexity)

[0087] this.sharedState = eventData.value;

[0088] / / Method 1: Update the data of child component B through an input property (@Input)

[0089] this.targetChildInput = eventData.value; / / Assume child component B receives data through @Input

[0090] / / Method 2: Call a public method of child component B through a template reference

[0091] / / this.secondComponent.updateFromParent(eventData.value);

[0092] }

[0093] private isValidData(data: any): boolean {

[0094] / / Specific validation logic (such as data type, required field check)

[0095] return data && typeof data === 'object' && 'id' in data;

[0096] }

[0097] }

[0098] <!-- Code for the parent component to notify child component B after component A is updated -->

[0099] Specifically, using a preset input attribute binding channel method to transfer the data value entity in the shared state temporary area to the second sub-component through the second data transmission interface can include: determining the input attribute corresponding to the second sub-component, and determining the state variable corresponding to the input attribute based on the input attribute, and then assigning the data value entity in the shared state temporary area to the state variable to obtain an assignment result; calling the input attribute change response mechanism in the second sub-component to perform data loading operations and view update operations on the assignment result to obtain a first processing result, and transferring the first processing result to the first sub-component through the second data transmission interface, so that the first sub-component can change the code corresponding to the second sub-component based on the first processing result to obtain a new second sub-component.

[0100] In addition, using a preset calling channel method to pass the data value entity in the shared state temporary area to the second sub-component through the second data transmission interface can include: using a preset instance template to obtain a reference identifier of the component instance corresponding to the second sub-component, and calling the update execution method corresponding to the second sub-component based on the reference identifier to construct a new update execution method based on the update execution method and the data value entity in the shared state temporary area; using the update execution method to trigger the preset data processing flow and view rendering operation in the second sub-component to obtain a second processing result, and passing the second processing result to the second sub-component through the second data transmission interface, so that the second sub-component can change the code corresponding to the second sub-component based on the second processing result to obtain a new second sub-component.

[0101] In this embodiment, when the data of subcomponent A is updated, the entire communication process can be divided into the following five phases: Subcomponent data change phase: Data changes within subcomponent A due to user operations such as form submissions, button clicks, or external data loading, such as HTTP (HyperText Transfer Protocol) responses, trigger local data update logic; Event emission phase: Subcomponent A calls the EventEmitter.emit() method, encapsulating the update event and data as event parameters, and passes them to the parent component through the @Output interface; Parent component event capture phase: The parent component's event handling function (such as onFirstComponentUpdate) is triggered, receives the event parameters, and performs data validation and business logic processing; Subcomponent B data update phase: The parent component passes the updated data to subcomponent B through input property binding or public method calls, triggering its internal data update logic; View synchronization rendering phase: Angular's change detection mechanism detects data changes in subcomponent B and automatically updates its view display to ensure that the user interface is consistent with the latest data state. In this way, the embodiment of the application achieves "one-way data flow", avoiding the state confusion that may be caused by two-way data binding, and ensuring predictable system state.

[0102] Specifically, after the event parameters are transmitted to the second sub-component through the preset data transmission method and the second data transmission interface, so that the second sub-component updates the current view display information based on the event parameters, it can also include: when a data update operation is detected in the second sub-component, the second sub-component is called and the update event corresponding to the data update operation and the update data are encapsulated using the data encapsulation algorithm determined based on the preset decorator to obtain the event parameters, and the event parameters are transmitted back to the parent component through the second data transmission interface; the target sub-component is dynamically selected based on the component identifier corresponding to the event parameters using the preset event source arbitration mechanism, and the event parameters are transmitted to the target sub-component through the data transmission interface corresponding to the target sub-component, so that the target sub-component performs a data synchronization operation based on the event parameters to obtain a new first sub-component.

[0103] In one specific implementation, taking the "Product Filter" and "Product List" components of an e-commerce platform as an example, subcomponent A (the filter component) updates its data and emits a filter parameter event after the user selects filter criteria (such as price range or brand). The parent component receives the filter parameters and calls the product list component's API, triggering a data query and list refresh. Subcomponent B (the product list component) then requests backend data based on the new filter parameters and updates the list display. This allows changes to filter criteria to be instantly synchronized with the product list, eliminating issues such as users having to manually refresh the page or data display delays.

[0104] As can be seen from the above, before the embodiment of the present application performs sub-component communication based on the Angular parent component, it is first necessary to construct a first sub-component including a first data transmission interface and a second sub-component including a second data transmission interface based on the template file corresponding to the parent component; then, when a data update operation is detected in the first sub-component, the first sub-component is called and the update event corresponding to the data update operation and the update data are encapsulated using the data encapsulation algorithm to obtain event parameters, and then transmitted to the parent component through the first data transmission interface; then, the preset event processing function is called to receive and verify the event parameters, and after the verification is passed, it is determined based on the preset requirements whether the data sharing status corresponding to the parent component meets the preset status update conditions. If so, the data sharing status is updated, and finally, the event parameters are transmitted to the second sub-component through the preset data transmission method and the second data transmission interface, so that the second sub-component updates the current view display information based on the event parameters. In this way, the efficiency of updating data is improved in the sub-component communication process based on the Angular parent component, thereby improving the synchronization and efficiency of the production process.

[0105] Accordingly, see Figure 3 As shown, the present application also provides a sub-component communication device based on an Angular parent component, which is applied to the parent component and includes:

[0106] A subcomponent construction module 11 is configured to construct a first subcomponent including a first data transmission interface and a second subcomponent including a second data transmission interface based on a template file corresponding to the parent component; the first subcomponent and the second subcomponent are both subcomponents of the parent component;

[0107] An event parameter determination module 12 is configured to, upon detecting a data update operation in the first subcomponent, call the first subcomponent and encapsulate the update event and update data corresponding to the data update operation using a data encapsulation algorithm to obtain event parameters, and transmit the obtained event parameters to the parent component via the first data transmission interface; the data encapsulation algorithm is a data encapsulation algorithm determined based on a preset decorator;

[0108] The event parameter verification module 13 is used to call the preset event processing function to receive and verify the event parameters, and after the verification is passed, determine whether the data sharing status corresponding to the parent component meets the preset status update conditions based on the preset requirements. If so, the data sharing status is updated, and the event parameters are transmitted to the second sub-component through the preset data transmission method and the second data transmission interface, so that the second sub-component updates the current view display information based on the event parameters.

[0109] As can be seen from the above, before the embodiment of the present application performs sub-component communication based on the Angular parent component, it is first necessary to construct a first sub-component including a first data transmission interface and a second sub-component including a second data transmission interface based on the template file corresponding to the parent component; then, when a data update operation is detected in the first sub-component, the first sub-component is called and the update event corresponding to the data update operation and the update data are encapsulated using the data encapsulation algorithm to obtain event parameters, and then transmitted to the parent component through the first data transmission interface; then, the preset event processing function is called to receive and verify the event parameters, and after the verification is passed, it is determined based on the preset requirements whether the data sharing status corresponding to the parent component meets the preset status update conditions. If so, the data sharing status is updated, and finally, the event parameters are transmitted to the second sub-component through the preset data transmission method and the second data transmission interface, so that the second sub-component updates the current view display information based on the event parameters. In this way, the efficiency of updating data is improved in the sub-component communication process based on the Angular parent component, thereby improving the synchronization and efficiency of the production process.

[0110] In some specific implementations, the sub-component construction module 11 may specifically include:

[0111] A component structure construction unit, configured to generate parent component information based on a preset component generation process in Angular, and generate a component structure based on a component structure generation command in Angular, so as to generate a parent component based on the parent component information and the component structure; wherein the parent component information includes a template file, a logic file, and a style file corresponding to the parent component;

[0112] a rendering position determining unit, configured to determine a rendering position corresponding to a subcomponent based on the template file and preset requirements using a preset subcomponent selector, and to determine a layout position of the subcomponent based on the rendering position; the layout position includes a parallel layout and a column layout;

[0113] The subassembly construction unit is configured to construct a first subassembly including a first data transmission interface and a second subassembly including a second data transmission interface based on the layout position.

[0114] In some specific implementations, the event parameter determination module 12 may specifically include:

[0115] a data encapsulation algorithm determination unit, configured to call a preset decorator and determine a data encapsulation algorithm based on a first target class, and set a second target class as an event to be monitored in the first subcomponent; wherein the first target class is a class for managing event emission and subscription; and the first target class is a class for data exchange determined based on preset requirements;

[0116] A data encapsulation unit is used to monitor the event to be monitored using a preset event binding syntax, so that when a data update operation is detected in the first sub-component, the first sub-component is called to determine the update event and update data corresponding to the data update operation, and then the first sub-component is called and the update event and the update data are encapsulated based on the data encapsulation algorithm to obtain event parameters, and are transmitted to the parent component through the first data transmission interface; wherein, the event parameters are structured parameter objects including a key name identifier and a data value entity, and the key name identifier is used to distinguish data types; the data value entity contains business data to be synchronized.

[0117] In some specific implementations, the event parameter verification module 13 may specifically include:

[0118] a verification result determination unit, configured to call a preset event processing function to receive the event parameters, parse the event parameters to obtain a data value entity corresponding to the event parameters, and then perform validity verification on the data value entity to obtain a verification result; the validity verification includes checking the integrity of the data format and the compliance of the value range;

[0119] a judgment result obtaining unit, configured to store the data value entity in a shared state temporary storage area in the parent component if the verification result indicates that the verification is passed, and then obtain a judgment result based on preset requirements as to whether the data sharing state corresponding to the shared state temporary storage area meets a preset state update condition;

[0120] A data value entity transmission unit is used to transfer the data value entity in the shared state temporary area to the second sub-component through the second data transmission interface using a preset input attribute binding channel method or a preset call channel method if the judgment result indicates that the data sharing state meets the preset state update condition.

[0121] In some specific implementations, the event parameter verification module 13 may specifically include:

[0122] an assignment result obtaining unit, configured to determine an input attribute corresponding to the second subcomponent, determine a state variable corresponding to the input attribute based on the input attribute, and then assign the data value entity in the shared state temporary storage area to the state variable to obtain an assignment result;

[0123] A sub-component code change unit is used to call the input attribute change response mechanism in the second sub-component to perform data loading operations and view update operations on the assignment result to obtain a first processing result, and transmit the first processing result to the first sub-component through the second data transmission interface, so that the first sub-component changes the code corresponding to the second sub-component based on the first processing result to obtain a new second sub-component.

[0124] In some specific implementations, the event parameter verification module 13 may specifically include:

[0125] an update execution method construction unit, configured to obtain a reference identifier of a component instance corresponding to the second subcomponent using a preset instance template, and call an update execution method corresponding to the second subcomponent based on the reference identifier, so as to construct a new update execution method based on the update execution method and the data value entity in the shared state temporary storage area;

[0126] A processing result determination unit is used to use the update execution method to trigger the preset data processing process and view rendering operation in the second sub-component to obtain a second processing result, and transmit the second processing result to the second sub-component through the second data transmission interface, so that the second sub-component can change the code corresponding to the second sub-component based on the second processing result to obtain a new second sub-component.

[0127] In some specific implementations, the Angular parent component-based subcomponent communication device may further include:

[0128] an event parameter acquisition unit, configured to, when a data update operation is detected in the second sub-component, call the second sub-component and encapsulate the update event and update data corresponding to the data update operation using a data encapsulation algorithm determined based on the preset decorator, obtain event parameters, and transmit the obtained event parameters back to the parent component via the second data transmission interface;

[0129] A data synchronization operation execution unit is used to utilize a preset event source arbitration mechanism and dynamically select a target sub-component based on a component identifier corresponding to the event parameter, and transmit the event parameter to the target sub-component through a data transmission interface corresponding to the target sub-component, so that the target sub-component performs a data synchronization operation based on the event parameter to obtain a new first sub-component.

[0130] Furthermore, the embodiment of the present application also discloses an electronic device, Figure 4 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content in the diagram cannot be considered as any limitation on the scope of use of this application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 is used to store a computer program, which is loaded and executed by the processor 21 to implement the relevant steps in the sub-component communication method based on the Angular parent component disclosed in any of the aforementioned embodiments. In addition, the electronic device 20 in this embodiment may specifically be an electronic computer.

[0131] In this embodiment, the power supply 23 is used to provide operating voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and the external device. The communication protocol it follows is any communication protocol that can be applied to the technical solution of this application and is not specifically limited here; the input and output interface 25 is used to obtain external input data or output data to the outside world. Its specific interface type can be selected according to specific application needs and is not specifically limited here.

[0132] In addition, the memory 22, as a carrier for resource storage, can be a read-only memory, random access memory, disk or CD, etc. The resources stored thereon can include an operating system 221, a computer program 222, etc., and the storage method can be temporary storage or permanent storage.

[0133] The operating system 221 is used to manage and control the hardware devices and computer program 222 on the electronic device 20, and can be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program that can be used to implement the Angular parent component-subcomponent communication method disclosed in any of the aforementioned embodiments and executed by the electronic device 20, the computer program 222 can further include a computer program that can be used to complete other specific tasks.

[0134] Furthermore, this application also discloses a computer-readable storage medium for storing a computer program; wherein, when executed by a processor, the computer program implements the aforementioned Angular parent-component-child component communication method. The specific steps of this method can be referred to the corresponding content disclosed in the aforementioned embodiments and will not be repeated here.

[0135] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from the other embodiments. Reference can be made to the descriptions of the identical or similar parts between the various embodiments. For the devices disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the descriptions are relatively simple, and the relevant parts can be referred to the descriptions of the methods.

[0136] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0137] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in random access memory (RAM), internal memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0138] Finally, it should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprise," "include," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus comprising a set of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, method, article, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not preclude the presence of additional identical elements in the process, method, article, or apparatus comprising the element.

[0139] The above is a detailed introduction to the technical solution provided by the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. At the same time, for those skilled in the art, according to the ideas of the present application, there may be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present application. < / app-component-first>

Claims

1. A sub-component communication method based on Angular parent component, characterized in that: Applied to the parent component, including: Constructing a first subcomponent including a first data transmission interface and a second subcomponent including a second data transmission interface based on a template file corresponding to the parent component; the first subcomponent and the second subcomponent are both subcomponents of the parent component; When a data update operation is detected in the first sub-component, the first sub-component is called and the update event corresponding to the data update operation and the update data are encapsulated using a data encapsulation algorithm to obtain event parameters, which are then transmitted to the parent component through the first data transmission interface; the data encapsulation algorithm is a data encapsulation algorithm determined based on a preset decorator; Call the preset event processing function to receive and verify the event parameters, and after the verification is passed, determine whether the data sharing status corresponding to the parent component meets the preset status update conditions based on the preset requirements. If so, update the data sharing status and transmit the event parameters to the second sub-component through the preset data transmission method and the second data transmission interface, so that the second sub-component updates the current view display information based on the event parameters.

2. The method for communicating between subcomponents based on Angular parent components according to claim 1, characterized in that: The step of constructing a first subcomponent including a first data transmission interface and a second subcomponent including a second data transmission interface based on a template file corresponding to the parent component includes: Generate parent component information based on a preset component generation process in Angular, and generate a component structure based on a component structure generation command in Angular, so as to generate a parent component based on the parent component information and the component structure; wherein the parent component information includes a template file, a logic file, and a style file corresponding to the parent component; Determining a rendering position corresponding to a subcomponent based on the template file and preset requirements using a preset subcomponent selector, and determining a layout position of the subcomponent based on the rendering position; the layout position includes a parallel layout and a column layout; A first subassembly including a first data transmission interface and a second subassembly including a second data transmission interface are constructed based on the layout position.

3. The method for communicating between subcomponents based on Angular parent components according to claim 1, characterized in that: When a data update operation is detected in the first sub-component, the first sub-component is called and an update event corresponding to the data update operation and the update data are encapsulated using a data encapsulation algorithm to obtain event parameters, and the event parameters are transmitted to the parent component through the first data transmission interface, including: Calling a preset decorator and determining a data encapsulation algorithm based on the first target class, and setting the second target class as the event to be monitored in the first subcomponent; wherein the first target class is a class for managing event emission and subscription; the first target class is a class for data exchange determined based on preset requirements; The event to be monitored is monitored using a preset event binding syntax, so that when a data update operation is detected in the first sub-component, the first sub-component is called to determine the update event and update data corresponding to the data update operation, and then the first sub-component is called to encapsulate the update event and the update data based on the data encapsulation algorithm to obtain event parameters, and transmit them to the parent component through the first data transmission interface; The event parameter is a structured parameter object including a key identifier and a data value entity. The key identifier is used to distinguish data types; and the data value entity includes business data to be synchronized.

4. The method for communicating between subcomponents based on Angular parent components according to claim 1, wherein: The calling of the preset event processing function receives and verifies the event parameters, and after the verification passes, determines whether the data sharing state corresponding to the parent component meets the preset state update condition based on the preset requirements; if so, updates the data sharing state, and transmits the event parameters to the second child component through the preset data transmission method and the second data transmission interface, including: Calling a preset event processing function to receive the event parameters, parsing the event parameters to obtain a data value entity corresponding to the event parameters, and then performing validity verification on the data value entity to obtain a verification result; the validity verification includes checking the integrity of the data format and the compliance of the value range; If the verification result indicates that the verification is passed, the data value entity is stored in the shared state temporary storage area in the parent component, and then a judgment result is obtained based on the preset requirements to determine whether the data sharing state corresponding to the shared state temporary storage area meets the preset state update condition; If the judgment result indicates that the data sharing state meets the preset state update condition, the data value entity in the shared state temporary area is transferred to the second subcomponent through the second data transmission interface using the preset input attribute binding channel method or the preset call channel method.

5. The method for communicating between subcomponents based on Angular parent components according to claim 4, characterized in that: Using a preset input attribute binding channel method to transfer the data value entity in the shared state temporary storage area to the second subcomponent through the second data transmission interface includes: Determining an input attribute corresponding to the second subcomponent, and determining a state variable corresponding to the input attribute based on the input attribute, and then assigning the data value entity in the shared state temporary area to the state variable to obtain an assignment result; Call the input attribute change response mechanism in the second sub-component to perform data loading operations and view update operations on the assignment result to obtain a first processing result, and pass the first processing result to the first sub-component through the second data transmission interface, so that the first sub-component can change the code corresponding to the second sub-component based on the first processing result to obtain a new second sub-component.

6. The method for communicating between subcomponents based on Angular parent components according to claim 4, characterized in that: Using a preset calling channel method to transfer the data value entity in the shared state temporary storage area to the second subcomponent through the second data transmission interface includes: Obtaining a reference identifier of a component instance corresponding to the second subcomponent using a preset instance template, and calling an update execution method corresponding to the second subcomponent based on the reference identifier, so as to construct a new update execution method based on the update execution method and the data value entity in the shared state temporary storage area; The update execution method is used to trigger the preset data processing flow and view rendering operation in the second sub-component to obtain a second processing result, and the second processing result is passed to the second sub-component through the second data transmission interface, so that the second sub-component can change the code corresponding to the second sub-component based on the second processing result to obtain a new second sub-component.

7. The method for communicating between subcomponents based on an Angular parent component according to any one of claims 1 to 6, characterized in that: After transmitting the event parameters to the second sub-component through the preset data transmission method and the second data transmission interface so that the second sub-component updates the current view display information based on the event parameters, the method further includes: When a data update operation is detected in the second sub-component, the second sub-component is called and the update event corresponding to the data update operation and the update data are encapsulated using the data encapsulation algorithm determined based on the preset decorator to obtain event parameters, and the event parameters are transmitted back to the parent component through the second data transmission interface; The target sub-component is dynamically selected based on the component identifier corresponding to the event parameter by utilizing the preset event source arbitration mechanism, and the event parameter is transmitted to the target sub-component through the data transmission interface corresponding to the target sub-component, so that the target sub-component performs a data synchronization operation based on the event parameter to obtain a new first sub-component.

8. A sub-component communication device based on an Angular parent component, characterized in that: Applied to the parent component, including: a subcomponent construction module, configured to construct, based on a template file corresponding to the parent component, a first subcomponent including a first data transmission interface and a second subcomponent including a second data transmission interface; the first subcomponent and the second subcomponent are both subcomponents of the parent component; an event parameter determination module, configured to, upon detecting a data update operation in the first subcomponent, call the first subcomponent and encapsulate the update event and update data corresponding to the data update operation using a data encapsulation algorithm, obtain event parameters, and transmit the obtained event parameters to the parent component via the first data transmission interface; the data encapsulation algorithm is a data encapsulation algorithm determined based on a preset decorator; An event parameter verification module is used to call a preset event processing function to receive and verify the event parameters, and after the verification is passed, determine whether the data sharing status corresponding to the parent component meets the preset status update conditions based on the preset requirements. If so, the data sharing status is updated, and the event parameters are transmitted to the second sub-component through the preset data transmission method and the second data transmission interface, so that the second sub-component updates the current view display information based on the event parameters.

9. An electronic device, characterized in that: include: Memory, used to store computer programs; A processor, configured to execute the computer program to implement the Angular parent component-based sub-component communication method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that Used to store a computer program, wherein when the computer program is executed by a processor, the child component communication method based on the Angular parent component as described in any one of claims 1 to 7 is implemented.

Images