Angular-based front-end resource tree component display method, system and equipment and medium

Abstract

The invention provides an angular-based front-end resource tree component display method, system and device and a medium, and belongs to the field of front ends. The method comprises the following steps: defining names and logical relationships of multi-level menu items, and assembling a multi-level menu resource tree by using an nz-tree component; performing routing configuration of the front-end resource tree component; according to the method, a Grid layout is utilized to construct an interface, a router-outlet component of an angular routing module is used as an entry point of a content sub-component, a component specified by a routing instruction is dynamically inserted, display and hiding of different pages are controlled, and when routing changes, the router-outlet component loads a corresponding component according to new routing information, and dynamic switching of the interface is achieved; the menu search is more comprehensive and direct in the form of the multi-level resource tree, the jump of the interface component is simpler and quicker, the individual requirements of different users can be met, and the operation efficiency is improved.

Description

Technical Field

[0001] The present invention belongs to the field of front-end technologies, and particularly relates to a method, system, device, and medium for displaying a front-end resource tree component based on angular. Background Art

[0002] In the development of front-end management systems, the handling of multi-level menus is a common and complex task. Especially when faced with three-level or four-level menus, the number of menu items increases sharply, which not only increases the development complexity but also poses challenges to users. If ready-made menu components are simply used, although the basic functions can be quickly implemented, in the face of complex multi-level menu structures, this single writing method often seems inadequate.

[0003] To improve the user experience and the maintainability of the system, more in-depth thinking is needed for the development of multi-level menus. A key requirement is to implement a fast search function for menu items, which allows users to quickly locate the target menu among numerous menu items, greatly improving work efficiency. At the same time, it is also necessary to ensure that the menu display is clear and straightforward, enabling users to see all menu items in the system at a glance and avoiding the sense of disorientation caused by overly deep menu levels.

[0004] In the prior art, when the number of menu items in the resource tree component is very large, it may lead to a decline in rendering performance, affecting the user experience. Moreover, as the number of menu items increases and is modified, it is necessary to manually update the definition and routing configuration of the resource tree component, increasing the maintenance cost. The layout and style of the resource tree menu may not be flexible enough to meet the personalized needs of different users. And when dealing with a large number of menu items, users may need to spend more time searching for and locating the target menu item, reducing the operation efficiency. Summary of the Invention

[0005] The purpose of the embodiments of the present invention is to provide a method, system, device, and medium for displaying a front-end resource tree component based on angular, which is used to fully or at least partially solve the technical problems of being unable to meet the personalized needs of different users and having low operation efficiency existing in the above prior art.

[0006] In a first aspect, an embodiment of the present application provides a method for displaying a front-end resource tree component based on angular, including: Defining the names and logical relationships of multi-level menu items, and assembling a multi-level menu resource tree using the nz-tree component; Performing routing configuration for the front-end resource tree component; Build the interface using the Grid layout and use the router-outlet component of the angular routing module as the entry point for the content sub-components to dynamically insert the components specified by the routing directives, control the display and hiding of different pages. When the route changes, the router-outlet component loads the corresponding component according to the new route information to achieve dynamic switching of the interface; among them, one side of the interface is the resource tree menu layout, and the other side is the content component layout.

[0007] Optionally, define the names and logical relationships of multi-level menu items and use the nz-tree component to assemble the multi-level menu resource tree, including: Define an array of treeNode to store the converted tree structure node data. Among them, the tree structure node data includes fields such as title, key, and isLeaf. Among them, title represents the title of the current tree node, key is the node identifier within the tree range, and isLeaf indicates whether it is a leaf node; Send a request instruction to the URL to obtain data, and call the translation function to convert the traversed data items into tree structure nodes, and add the converted nodes to the treeNode array; Return the treeNode array containing all the converted tree structure nodes.

[0008] Optionally, the process of calling the translation function to convert the traversed data items into tree structure nodes includes: Obtain the current node node data, assign the name menuName of the current node node menu item to the tree node title, and assign the code of the current node node menu item to the key of the tree node; Judge whether the current node node has children. If so, set isLeaf to true, otherwise, set it to false; If the current node node has children and the length of the child node array is greater than zero, recursively call the translation function to process the node.

[0009] Optionally, the process of configuring the routing of the front-end resource tree component includes: Configure the routes array in the module file of the current component, and define the reference component of the root path as the parent component where the menu tree is located; Configure the children in the routes array to introduce the interface components associated with each menu item, and define the path path and the component name component; If there are second-level or third-level menus in the menu items, define the path and the second-level menu components in the second-level menu, and define an array of children in the components of the current second-level menu, reference the relevant components of the third-level menu, and define the path to introduce the corresponding interface components; If the referenced component is not a component in the module where the current resource tree component is located, use the loadChildren property to dynamically load the module.

[0010] Optionally, if the referenced component is not a component in the module where the current resource tree component is located, use the loadChildren property to dynamically load the module to specify a function that returns a Promise. When the Promise is resolved, it returns a module class. Use the import function to dynamically import the module that needs to be introduced currently, and use the then method to process the import result and return the class of the current module.

[0011] Optionally, configure the children in the routes array to introduce the interface components associated with each menu item, and define the path and the component name in the component. If the component is a dynamically created or directly used component, it needs to be referenced in the entryComponents array.

[0012] Optionally, use the Grid layout to build the interface, and use the router-outlet component of the angular routing module as the entry point for the content sub-components to dynamically insert the components specified by the routing directive, control the display and hiding of different pages. When the routing changes, the router-outlet component loads the corresponding component according to the new routing information to achieve dynamic switching of the interface, including: Obtain the relevant node information of the currently clicked tree node through the nzClick method of nz-tree, and implement the path for routing jump according to the menuUrl of the node source information; If the clicked menu item node has child nodes, the root node does not perform a routing jump, and the child nodes perform the jump; If the clicked menu item node has no child nodes, according to the path of the node information, display the interface component that needs to be echoed according to the component matched by the routing.

[0013] In a second aspect, the embodiments of the present application further provide a system for displaying a front-end resource tree component based on angular, including: An assembly unit for defining the names and logical relationships of multi-level menu items and assembling a multi-level menu resource tree using the nz-tree component; A configuration unit for performing routing configuration of the front-end resource tree component; A display unit is used to construct an interface using a Grid layout and use the router-outlet component of the angular routing module as the entry point for content sub-components, realizing the dynamic insertion of components specified by routing directives, controlling the display and hiding of different pages. When the routing changes, the router-outlet component loads the corresponding component according to the new routing information, realizing the dynamic switching of the interface; wherein, one side of the interface is a resource tree menu layout, and the other side is a content component layout.

[0014] In a third aspect, an embodiment of the present application further provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it implements the steps of the method for displaying a front-end resource tree component based on angular described above.

[0015] In a fourth aspect, an embodiment of the present application further provides a storage medium, on which a computer program is stored. When the computer program is executed by a processor, it implements the steps of the method for displaying a front-end resource tree component based on angular described above.

[0016] From the above technical solutions, it can be seen that the present invention has the following advantages: In the method, system, device, and medium for displaying a front-end resource tree component based on angular provided by the present application, the menu search is more comprehensive and direct in the form of a multi-level resource tree, and the jump of interface components is more concise and rapid, which can meet the personalized needs of different users and improve the operation efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions of the present invention, the drawings required for description will be briefly introduced below. Obviously, the drawings in the following description are only some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0018] Figure 1 It is a flowchart of a method for displaying a front-end resource tree component based on angular provided by an embodiment of the present invention; Figure 2 It is a flowchart for constructing a multi-level menu resource tree provided by an embodiment of the present invention; Figure 3 It is a detailed flowchart of a method for displaying a front-end resource tree component based on angular provided by an embodiment of the present invention; Figure 4 It is a schematic structural diagram of a system for displaying a front-end resource tree component based on angular provided by an embodiment of the present invention; Figure 5 A schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present invention. Detailed implementation manners

[0019] In the following detailed description, various embodiments of the present disclosure will be described more fully. The present disclosure may have various embodiments and adjustments and changes may be made therein. However, it should be understood that there is no intention to limit the various embodiments of the present disclosure to the specific embodiments disclosed herein, but the present disclosure should be understood to cover all adjustments, equivalents, and / or alternative solutions that fall within the spirit and scope of the various embodiments of the present disclosure.

[0020] In the following, the term "comprising" or "may comprise" that may be used in various embodiments of the present disclosure indicates the presence of the disclosed function or operation, and does not limit the addition of one or more functions or operations. Further, as used in various embodiments of the present disclosure, the terms "comprising", "having" and their cognates are only intended to indicate a specific feature, number, step, operation, or combination of the foregoing items, and should not be construed as precluding the existence or addition of one or more other features, numbers, steps, operations, or combinations of the foregoing items first.

[0021] In various embodiments of the present disclosure, the expression "or" or "at least one of A or / and B" includes any combination or all combinations of the listed words. For example, the expression "A or B" or "at least one of A or / and B" may include A, may include B, or may include both A and B.

[0022] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0023] Refer to Figure 1 Shown is a flowchart of a method for displaying a front-end resource tree component based on angular in a specific embodiment, including the following execution steps: Step 100: Define the names and logical relationships of multi-level menu items, and assemble a multi-level menu resource tree using the nz-tree component.

[0024] Specifically, refer to Figure 2 Shown, based on Step 100, the following will give a possible embodiment to non-restrictively elaborate on its specific implementation manner, and specifically execute the following steps: S1000: Define an array of treeNode to store the node data of the converted tree structure. The node data of the tree structure includes fields such as title, key, and isLeaf. Here, title represents the title of the current tree node, key is the node identifier within the tree scope, and isLeaf indicates whether it is a leaf node.

[0025] S1001: Obtain data by sending a request instruction to the URL, and call the translation function to convert the traversed data items into tree structure nodes, and add the converted nodes to the treeNode array.

[0026] Specifically, the process of calling the translation function to convert the traversed data items into tree structure nodes includes: obtaining the data of the current node, assigning the name menuName of the menu item of the current node to the title of the tree node, and assigning the code of the menu item of the current node to the key of the tree node; determining whether the current node has children. If so, set isLeaf to true, otherwise, set it to false; if the current node has children and the length of the child node array is greater than zero, recursively call the translation function to process the node to implement the processing of all related nodes, ensure that the node data processing is not omitted, and ultimately ensure that the structure tree can be better presented.

[0027] S1002: Return the treeNode array containing all the converted tree structure nodes.

[0028] In a specific embodiment, first, define the menu item names. In this embodiment, four first-level menu items are defined. Of course, the first-level menu can be extended according to the project requirements. Similarly, the second-level menu or the third-level menu can be extended according to the needs. Prepare the menu names and the corresponding logical relationships to provide the corresponding data sources in the encapsulation of the resource tree. Assembly of the tree structure: Use the nz-tree component to assemble the resource tree. The previous menu data source is the json data provided by the backend interface. Here, it needs to be converted on the front end because the nz-tree component requires a title to represent the title of the current tree node, the key is the node key within the entire tree range, which is not allowed to be repeated, the mark identifying the current DOM node, and isLeaf indicating whether it is a leaf node. Therefore, when getting the data returned by the backend interface, it is necessary to traverse the interface data first. In this embodiment, the interface data is converted into the required tree structure array at the interface request end. Send an HTTP GET request to the specified URL to obtain the data. Then, use the provided translation function to convert each data item into a node of the tree structure. Finally, form an array with all the converted nodes and return it. This process is implemented through the map operator of RxJS, allowing each data item to be processed after obtaining the data. The specific implementation process: 1) First, define an array of treeNode to store the data of the converted tree structure nodes; 2) Traverse the http request data array obtained, and then call the translation function translateTree() to convert the data item into a tree structure node, and add the converted node to the treeNode array; 3) Return an array containing all the converted tree structure nodes; 4) The nz-tree component needs to be used. Since each data item needs to be converted into a node during traversal, a translation function translateTree() is encapsulated here, which can simplify the code and improve the usability of the code.

[0029] Step 101: Configure the routing of the front-end resource tree component.

[0030] Specifically, when executing Step 101, the following steps can be specifically executed: S1010: Configure the routes array in the module file of the current component, and define the reference component of the root path as the parent component where the menu tree is located.

[0031] S1011: Configure the children in the routes array to introduce the interface components associated with each menu item, and define the path path and the component name component.

[0032] It should be understood that the children in the routes array are configured to introduce the interface components associated with each menu item, and in the defined path and component name component, if the component is dynamically created or directly used, it needs to be referenced in the entryComponents array.

[0033] S1012: If there are secondary or tertiary menus in the menu item, define the path and the secondary menu component in the secondary menu, and define the children array in the component of the current secondary menu to reference the relevant components of the tertiary menu and define the path to introduce the corresponding interface components.

[0034] S1013: If the referenced component is not in the module where the current resource tree component is located, use the loadChildren property to dynamically load the module.

[0035] Specifically, if the referenced component is not in the module where the current resource tree component is located, use the loadChildren property to dynamically load the module to specify a function that returns a Promise. When the Promise is resolved, it returns a module class. Use the import function to dynamically import the module that needs to be introduced currently, and use the then method to handle the import result and return the class of the current module.

[0036] In some implementations, the routing of the component is configured, because the later menu items are not fixed, this part is customized, and some page components have been partially developed in the existing system. For such developed interface components, there is no need to develop again, only to reference them. The specific implementation steps are as follows: 1. Perform relevant configuration of routes in the module file of the current component. First, define the routes array, and then define the reference component of the root path. This is the parent component where the current menu tree is located. The path is defined according to your own needs. This embodiment sets it to empty because the access path of the parent component has been defined in the file of the external root module, so there is no need to define it here. 2. Configure the children in the routes array. This is the key stage, that is, to introduce the interface components associated with each menu item. If an interface component has been developed before, then the component can be directly introduced here, and the path and component name component must be defined. Note that in angular, the component needs to be declared in the module first. If it is a component that needs to be dynamically created or used directly, it also needs to be referenced in the entryComponents array. 3. If the menu item has a second or third level menu, then you need to define the path and second level menu components in the second level menu, then define the children array in the current second level menu component, reference the relevant components of the third level menu, define the path, and introduce the corresponding interface components. 4. If the component is a component in another module that is referenced, not the module where the current resource tree component is located, then you can also make relevant references, but you need to use the lazy loading reference mode of the module to reference it, that is, the function of dynamically loading the module, use the loadChildren attribute to specify a function, which will return a Promise, and when the Promise is resolved, it will return a module class. In the function, use the import function to dynamically import the module that needs to be introduced at present, and use the then method to process the import result and return the class of the current module. In this way, the module will be loaded at runtime instead of being packaged in at compile time. The advantage of this is that it can improve the interface performance and significantly reduce the initial loading time by delaying the loading of feature modules that are not immediately needed; in addition, lazy loading reduces the amount of data transmission between the server and the client, and the user experience is greatly improved, and the code structure is clearer, easier to understand and debug.

[0037] Step 102: Build the interface using the Grid layout and use the router-outlet component of the angular routing module as the entry point for the content sub-component to dynamically insert the component specified by the routing directive, control the display and hiding of different pages. When the route changes, the router-outlet component loads the corresponding component according to the new route information to achieve dynamic switching of the interface.

[0038] Among them, one side of the interface is the resource tree menu layout, and the other side is the content component layout.

[0039] Specifically, when executing Step 102, the following steps can be specifically executed: S1020: Obtain the relevant node information of the currently clicked tree node through the nzClick method of nz-tree, and implement the path for route jump according to the menuUrl of the node source information.

[0040] S1021: If the menu item node clicked has child nodes, the root node does not perform a route jump, and the child nodes perform the jump.

[0041] S1022: If the menu item node clicked has no child nodes, according to the path of the node information, display the interface component that needs to be echoed according to the component matched by the route.

[0042] In a specific embodiment, Steps 100 and 101 respectively introduce the left menu component and the right content area routing part. By establishing the connection between these two parts, the interface component desired by the user is displayed on the right when the corresponding menu item is clicked: To better balance the aesthetics of the interface layout, the Grid layout is used to build a reasonable proportional relationship of the interface. The left side is the layout of the resource tree menu, occupying 5 grid proportions. The right side is the content component part, occupying 19 grid layouts. Then, the corresponding interface sub-components are introduced. Here, the router-outlet component of the angular routing module is used to dynamically insert the component specified by the routing directive. That is, when the route changes, the router-ourlet will load the corresponding component according to the new route information, thereby achieving dynamic switching of the page. In the route configuration, each route specifies a component, and when the route is successfully matched, the component will be inserted into the router-outlet for display. Therefore, the router-outlet component of the routing module is cleverly used as the entry point for the content sub-component in the content component area container, and the display and hiding of different pages are controlled through routing, which is more user-friendly and greatly improves the optimization degree of the code architecture.

[0043] In some embodiments, the steps to identify the corresponding path for a clicked menu item are as follows: 1. Use the nzClick method of nz-tree to obtain the relevant node information of the currently clicked tree node, and event.node.origin to obtain the node source information. 2. Since the menu items are not fixed, define the required path information in the interface part, and maintain the paths defined by the front end in the back-end interface, so that the corresponding routing information can be obtained by clicking the corresponding menu item. In this embodiment, the menuUrl of the node source information is obtained to implement the path of the routing jump. 3. Not all menu item nodes perform routing jumps. If there are child nodes in the menu node, then the root node does not need to perform a jump, and only the child nodes need to perform the jump. Therefore, judge the children of the event.node.origin node source information to display the corresponding interface components of the child nodes, and give corresponding prompts to the parent nodes with child nodes. For the nodes without child nodes, obtain the path of the node information, and display the interface components to be echoed according to the components matched by the routing. This implementation improves the friendly prompt for the interface and is very friendly to the user experience of the current interface.

[0044] In this embodiment, the menu search is made more comprehensive and direct in the form of a multi-level resource tree, and the jump of the interface components is more concise and rapid, which can meet the personalized needs of different users and improve the operation efficiency.

[0045] In one embodiment, Figure 3 FIG. is a detailed flowchart of a method for displaying a front-end resource tree component based on angular according to an embodiment of the present invention. This embodiment is further optimized and extended on the basis of the above embodiments.

[0046] S300: Define an array of treeNode to store the converted tree-structured node data. Among them, the tree-structured node data includes fields such as title, key, and isLeaf. Among them, title represents the title of the current tree node, key is the node identifier within the tree range, and isLeaf represents whether it is a leaf node.

[0047] S301: Obtain data by sending a request instruction to the URL, and call the translation function to convert the traversed data items into tree-structured nodes, and add the converted nodes to the treeNode array.

[0048] S302: Return the treeNode array containing all the converted tree-structured nodes.

[0049] S303: Configure the `routes` array in the `module` file of the current component, and define the reference component for the root path as the parent component where the menu tree is located.

[0050] S304: Configure the `children` in the `routes` array to introduce the interface components associated with each menu item, and define the path `path` and the component name `component`.

[0051] S305: If there are second-level or third-level menus in the menu item, define the `path` and the second-level menu component in the second-level menu, and define the `children` array in the component of the current second-level menu to reference the relevant components of the third-level menu, and define the `path` to introduce the corresponding interface components.

[0052] S306: If the referenced component is not a component in the module where the current resource tree component is located, use the `loadChildren` property to dynamically load the module.

[0053] S307: Obtain the relevant node information of the currently clicked tree node through the `nzClick` method of `nz-tree`, and implement the `path` for route navigation based on the `menuUrl` of the node source information.

[0054] S308: If the clicked menu item node has child nodes, the root node does not perform route navigation, and the child nodes implement the navigation.

[0055] S309: If the clicked menu item node has no child nodes, based on the `path` of the node information, display the interface component to be echoed according to the component matched by the route.

[0056] It should be understood that the magnitudes of the sequence numbers of the steps in the above embodiments do not imply the order of execution. The order of execution of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present invention.

[0057] As Figure 4 shown, the following is an embodiment of a system for displaying a front-end resource tree component based on angular provided by an embodiment of the present disclosure. It belongs to the same inventive concept as the method for displaying a front-end resource tree component based on angular in the above embodiments. For the details not described in detail in the embodiment of the system for displaying a front-end resource tree component based on angular, reference can be made to the embodiments of the method for displaying a front-end resource tree component based on angular.

[0058] An assembly unit for defining the names and logical relationships of multi-level menu items, and assembling a multi-level menu resource tree using the `nz-tree` component; A configuration unit for performing route configuration of the front-end resource tree component; A display unit is used to construct an interface using a Grid layout and use the router-outlet component of the angular routing module as the entry point for content sub-components, enabling dynamic insertion of components specified by routing directives, controlling the display and hiding of different pages. When the routing changes, the router-outlet component loads the corresponding component according to the new routing information, realizing dynamic switching of the interface; wherein, one side of the interface is a resource tree menu layout, and the other side is a content component layout.

[0059] Figure 5 It is a schematic diagram of the hardware structure of an electronic device for implementing various embodiments of the present invention.

[0060] The method for displaying a front-end resource tree component based on angular provided in the embodiments of the present application can be applied to an electronic device. Those skilled in the art can understand that the structure of the electronic device involved in the embodiments of the present invention does not constitute a limitation on the electronic device. The electronic device may include more or fewer components than shown in the figure, or combine some components, or have different component arrangements. In the embodiments of the present invention, the electronic device includes, but is not limited to, a laptop computer, a desktop computer, a workbench, a personal digital assistant, a server, a blade server, a mainframe computer, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown in the figure, their connections and relationships, and their functions are only examples and are not intended to limit the implementation of the embodiments of the present application described and / or claimed herein.

[0061] The electronic device may include a processor, an external memory interface, an internal memory, a universal serial bus (USB) interface, a charging management module, a power management module, a battery, a wireless communication module, an audio module, a speaker, a microphone, a sensor module, keys, a camera, a display screen, and a SIM card interface, etc.

[0062] It can be understood that the structure schematically shown in the embodiments of the present application does not constitute a specific limitation on the electronic device. In other embodiments of the present application, the electronic device may include more or fewer components than shown in the figure, or combine some components, or split some components, or have different component arrangements. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0063] The processor may include one or more processing units. For example, the processor may include a central processing unit (CPU), an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units may be independent devices or integrated in one or more processors.

[0064] Among them, the processor may be the nerve center and command center of the electronic device. The controller can generate operation control signals according to the instruction operation code and timing signals to complete the control of fetching and executing instructions.

[0065] A memory may also be provided in the processor for storing instructions and data. In some embodiments, the memory in the processor is a cache memory. This memory can store the instructions or data that the processor has just used or recycled. If the processor needs to use the instruction or data again, it can directly call it from this memory. This avoids repeated accesses, reduces the waiting time of the processor, and thus improves the system efficiency.

[0066] The external memory interface can be used to connect an external memory card, such as a MicroSD card, to expand the storage capacity of the electronic device. The external memory card communicates with the processor through the external memory interface to achieve the data storage function. For example, files such as music and videos are saved in the external memory card.

[0067] The internal memory can be used to store computer-executable program code, and the computer-executable program code includes instructions. The processor executes various functional applications and data processing of the electronic device by running the instructions stored in the internal memory. The internal memory may include a program storage area and a data storage area. The internal memory may include a high-speed random access memory and may also include non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0068] The wireless communication function of the electronic device can be implemented through an antenna, a wireless communication module, a modem processor, a baseband processor, etc.

[0069] The wireless communication module can provide wireless communication solutions for electronic devices, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite systems (GNSS), frequency modulation (FM), near field communication (NFC), infrared technology (IR), etc.

[0070] The electronic device can implement audio functions through an audio module, speaker, receiver, microphone, headphone jack, application processor, etc.

[0071] The electronic device can implement a shooting function through an ISP, camera, video codec, GPU, display screen, and application processor, etc.

[0072] The electronic device can implement a display function through a GPU, display screen, and application processor, etc.

[0073] The GPU is a microprocessor for image processing, connecting the display screen and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor may include one or more GPUs, which execute program instructions to generate or change display information.

[0074] The display screen is used to display images, videos, etc. The display screen includes a display panel.

[0075] In the storage medium provided in this application, there is a program product capable of implementing the method for displaying a front-end resource tree component based on angular.

[0076] In some possible implementation manners, the subject name of this disclosure, the method and system for displaying a front-end resource tree component based on angular, can be implemented in the form of a program product, which includes program code. When the program product runs on a terminal device, the program code is used to cause the terminal device to execute the steps according to various exemplary embodiments of this disclosure described in the above "Exemplary Method" section of this specification.

[0077] The storage medium of the present disclosure may employ any combination of one or more readable media. The readable media may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0078] The foregoing description of the disclosed embodiments enables those skilled in the art to practice or use the present invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Thus, the present invention is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for displaying a front-end resource tree component based on angular, characterized in that: include: Define the names and logical relationships of multi-level menu items, and use the nz-tree component to assemble a multi-level menu resource tree; Perform routing configuration for the front-end resource tree component; The interface is constructed using the Grid layout, and the router-outlet component of the angular routing module is used as the entry point of the content subcomponent to dynamically insert components specified by routing instructions and control the display and hiding of different pages. When the route changes, the router-outlet component loads the corresponding component according to the new routing information to achieve dynamic switching of the interface; one side of the interface is the resource tree menu layout, and the other side is the content component layout.

2. According to the method for displaying the front-end resource tree component based on angular 1, it is characterized in that: Define the names and logical relationships of multi-level menu items, and use the nz-tree component to assemble a multi-level menu resource tree, including: Define a treeNode array for storing the converted tree structure node data, wherein the tree structure node data includes title, key, and isLeaf fields, wherein title represents the title of the current tree node, key is the node identifier within the tree range, and isLeaf represents whether it is a leaf node; Get data by sending a request instruction to the URL, call the translation function to convert the traversed data items into tree structure nodes, and add the converted nodes to the treeNode array; Returns a treeNode array containing all converted tree structure nodes.

3. According to the method for displaying the front-end resource tree component based on angular 2, it is characterized in that: The process of calling the translation function to convert the traversed data items into tree structure nodes includes: Get the data of the current node, assign the name of the menu item of the current node, menuName, to the title of the tree node, and assign the code of the menu item of the current node to the key of the tree node; Determine whether the current node has children. If so, set isLeaf to true, otherwise, set it to false; If the current node has children and the length of the child node array is greater than zero, the translation function is recursively called to process the node.

4. The method for displaying a front-end resource tree component based on Angular according to claim 1 is characterized in that: The routing configuration process of the front-end resource tree component includes: Configure the routes array in the module file of the current component, and define the reference component of the root path as the parent component where the menu tree is located; Configure the children in the routes array to introduce the interface components associated with each menu item and define the path and component name component; If there is a second-level or third-level menu in the menu item, define the path and second-level menu components in the second-level menu, define the children array in the current second-level menu component, reference the relevant components of the third-level menu, define the path, and introduce the corresponding interface components; If the referenced component is not a component in the module where the current resource tree component is located, use the loadChildren property to dynamically load the module.

5. According to the method for displaying the front-end resource tree component based on angular according to claim 4, it is characterized in that: If the referenced component is not a component in the module where the current resource tree component is located, use the loadChildren property to dynamically load the module to specify a function that returns a Promise. When the Promise is resolved, a module class is returned. Use the import function to dynamically import the module that needs to be introduced, and use the then method to process the import result and return the class of the current module.

6. The method for displaying a front-end resource tree component based on angular according to claim 4 is characterized in that: Configure the children in the routes array to introduce the interface components associated with each menu item, and define the path path and component name component. If the component is dynamically created or directly used, it needs to be referenced in the entryComponents array.

7. The method for displaying a front-end resource tree component based on Angular according to claim 1, characterized in that: Use the Grid layout to build the interface, and use the router-outlet component of the angular routing module as the entry point of the content subcomponent to dynamically insert the components specified by the routing instructions and control the display and hiding of different pages. When the route changes, the router-outlet component loads the corresponding component according to the new routing information to achieve dynamic switching of the interface, including: Get the relevant node information of the current tree node through the nzClick method of nz-tree, and implement the path of route jump according to the menuUrl of the node source information; If the clicked menu item node has child nodes, the root node does not perform routing jumps, but the child nodes do. If the clicked menu item node has no child nodes, the interface component that needs to be echoed is displayed according to the path of the node information and the component matched by the route.

8. A system for displaying front-end resource tree components based on angular, characterized in that: include: Assembly unit, used to define the names and logical relationships of multi-level menu items, and use nz-tree components to assemble a multi-level menu resource tree; Configuration unit, used for routing configuration of front-end resource tree components; The display unit is used to build an interface using the Grid layout, and uses the router-outlet component of the angular routing module as the entry point of the content subcomponent to dynamically insert components specified by routing instructions and control the display and hiding of different pages. When the route changes, the router-outlet component loads the corresponding component according to the new routing information to achieve dynamic switching of the interface; one side of the interface is the resource tree menu layout, and the other side is the content component layout.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the steps of the method for displaying the angular-based front-end resource tree component as described in any one of claims 1 to 7 are implemented.

10. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for displaying an angular-based front-end resource tree component are implemented as described in any one of claims 1 to 7.

Images