CN112416341A - Method, device and medium for generating multi-level transversely-expanded menu based on ng-zorro - Google Patents
Method, device and medium for generating multi-level transversely-expanded menu based on ng-zorro Download PDFInfo
- Publication number
- CN112416341A CN112416341A CN202011101923.8A CN202011101923A CN112416341A CN 112416341 A CN112416341 A CN 112416341A CN 202011101923 A CN202011101923 A CN 202011101923A CN 112416341 A CN112416341 A CN 112416341A
- Authority
- CN
- China
- Prior art keywords
- menu
- sub
- level
- components
- component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method for generating a multi-level transversely expanded menu based on ng-zorro, which comprises the following steps: defining a navigation menu through ng-zorro, wherein the navigation menu only has a first level and the mode is horizontal expansion; defining a sub-menu component, wherein the sub-menu component is used for displaying a next level sub-menu of the current menu; the sub-menu components are quoted in the sub-menu components and menu parameters are added, the menu parameters comprise the name of each current menu and whether a next-level sub-menu exists or not, the method is used for realizing that the sub-menu components are quoted and the next-level sub-menu parameters are added in an automatic circulation mode if the current menu has the next-level sub-menu, and the sub-menu components are quoted automatically if the current menu does not have the next-level sub-menu; and adding the sub-menu component to the navigation menu to realize a multi-level transverse expansion menu. The invention provides a method, a device and a medium for generating a multi-level transverse expansion menu based on ng-zorro, which realize the transverse expansion of a navigation menu with indefinite levels in the current version of the ng-zorro.
Description
Technical Field
The invention relates to the technical field of front-end ng-zorro frameworks, in particular to a method, a device and a medium for generating a multi-level transversely-expanded menu based on ng-zorro.
Background
When a developer wants to generate a dynamic menu, the content of the menu may be large, and the menu is too long to exceed the screen due to vertical expansion, the horizontal menu is needed. In the current ng-zorro version, the official only provides one method for navigation menu creation of an indefinite number of levels, namely a recursive method, and explicitly states in the explanation of this method, which is not applicable to the creation of horizontal menus, but only to vertical menus. For menus with indefinite levels of horizontal expansion, official documents do not provide a specific implementation method, the existing recursive horizontal expansion method has defects, and part of the menus with the indefinite levels disappear and cannot be used.
Disclosure of Invention
The technical problem to be solved by the invention is to provide a method, a device and a medium for generating a multi-level transversely-expanded menu based on ng-zorro, so that the transversely-expanded menu with indefinite levels is supported in the current version of ng-zorro.
In a first aspect, the present invention provides a method for generating a multi-level horizontally expanding menu based on ng-zorro, including:
defining a navigation menu through ng-zorro, wherein the navigation menu only has a first level and the mode is horizontal expansion;
defining a sub-menu component, wherein the sub-menu component is used for displaying a next level sub-menu of the current menu;
the sub-menu components are quoted in the sub-menu components and menu parameters are added, the menu parameters comprise the name of each current menu and whether a next-level sub-menu exists or not, the method is used for realizing that the sub-menu components are quoted and the next-level sub-menu parameters are added in an automatic circulation mode if the current menu has the next-level sub-menu, and the sub-menu components are quoted automatically if the current menu does not have the sub-menu;
and adding the sub-menu component to the navigation menu to realize a multi-level transverse expansion menu.
Furthermore, the sub-menu component comprises a leaf menu and a branch menu, the leaf menu has no next-level sub-menu, and the branch menu is provided with a next-level sub-menu;
and quoting the sub-menu components and adding menu parameters in the sub-menu components, and further specifically quoting the sub-menu components and adding menu parameters in branch menus of the sub-menu components.
In a second aspect, the present invention provides an apparatus for generating a multi-level horizontally expanded menu based on ng-zorro, including: the navigation menu generation module, the sub-menu component cyclic reference module and the menu integration module;
the navigation menu generation module is used for defining a navigation menu through ng-zorro, and the navigation menu only has a first level and is in a transverse expansion mode;
the sub-menu component generating module is used for defining a sub-menu component, and the sub-menu component is used for displaying a next-level sub-menu of the current menu;
the sub-menu component cyclic reference module is used for referencing the sub-menu components in the sub-menu components and adding menu parameters, wherein the menu parameters comprise the name of each current menu and whether a next-level sub-menu exists or not, and is used for realizing that if the current menu has the next-level sub-menu, the sub-menu components are cyclically referenced automatically and the next-level sub-menu parameters are added, and if the current menu does not have the next-level sub-menu, the sub-menu components are automatically referred to;
and the menu integration module is used for adding the sub-menu component to the navigation menu to realize a multi-level transverse expansion menu.
Furthermore, the sub-menu component comprises a leaf menu and a branch menu, the leaf menu has no next-level sub-menu, and the branch menu is provided with a next-level sub-menu;
and quoting the sub-menu components and adding menu parameters in the sub-menu components, and further specifically quoting the sub-menu components and adding menu parameters in branch menus of the sub-menu components.
In a third aspect, the invention provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the method of the first aspect.
The embodiment of the invention has the following technical effects or advantages:
the method comprises the steps that self sub-menu components are quoted in the sub-menu components, and menu parameters are added, so that the sub-menu components are quoted automatically and circularly if the current menu has a next-level sub-menu, the multi-level transverse expansion menu is realized, the fixed-level limitation is avoided, and the problem that the transverse expansion menu cannot be generated dynamically is successfully solved; as of the filing date of the present invention, the ng-zorro authority has not repaired the problem, and even if repairs are made in the future, it will be imperative to update a new version of ng-zorro, which may cause compatibility problems, and most programmers will not choose an update, and the present invention will still have value.
The foregoing description is only an overview of the technical solutions of the present invention, and the embodiments of the present invention are described below in order to make the technical means of the present invention more clearly understood and to make the above and other objects, features, and advantages of the present invention more clearly understandable.
Drawings
The invention will be further described with reference to the following examples with reference to the accompanying drawings.
FIG. 1 is a flow chart of a method according to one embodiment of the present invention;
FIG. 2 is a block diagram illustrating a horizontal multi-level menu implementation process according to an embodiment of the present invention;
FIG. 3 is a schematic diagram illustrating a longitudinal expansion of a navigation menu in the prior art;
FIG. 4 is a diagram illustrating the expansion of a horizontal multi-level menu according to an embodiment of the present invention
FIG. 5 is a schematic structural diagram of an apparatus according to a second embodiment of the present invention;
fig. 6 is a schematic structural diagram of a medium according to a third embodiment of the present invention.
Detailed Description
In order to make those skilled in the art better understand the technical solutions in the present specification, the technical solutions in the embodiments of the present specification will be clearly and completely described below with reference to the drawings in the embodiments of the present specification, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the present description without inventive step, shall fall within the scope of protection of the present application.
Example one
The embodiment provides a method for generating a multi-level horizontally expanded menu based on ng-zorro, as shown in fig. 1, including:
defining a navigation menu through ng-zorro, wherein the navigation menu only has a first level and the mode is horizontal expansion;
defining a sub-menu component, wherein the sub-menu component is used for displaying a next level sub-menu of the current menu;
the sub-menu components are quoted in the sub-menu components and menu parameters are added, the menu parameters comprise the name of each current menu and whether a next-level sub-menu exists or not, the method is used for realizing that the sub-menu components are quoted and the next-level sub-menu parameters are added in an automatic circulation mode if the current menu has the next-level sub-menu, and the sub-menu components are quoted automatically if the current menu does not have the sub-menu;
and adding the sub-menu component to the navigation menu to realize a multi-level transverse expansion menu.
As shown in fig. 2, in a possible implementation, the specific steps are as follows:
s1, defining a first-level navigation menu through ng-zorro, wherein the navigation menu mode is transversely expanded;
s2, defining a sub-menu component, wherein the sub-menu component is used for displaying a next-level sub-menu of the current menu; the submenu component comprises a leaf menu and a branch menu, the leaf menu has no next level submenu, and the branch menu is provided with a next level submenu;
the implementation code of the leaf menu is as follows:
<li nz-menu-item*ngIf＝"men.children.length＝＝0"(click)＝"addtab(men)"><i nz-icon[nzType]＝"'appstore'"></i>{{men.title}}</li>
the implementation code of the branch menu is as follows:
<li nz-submenu*ngIf＝"men.children.length>0"[nzTitle]＝"men.title"[nzIcon]＝"'appstore'">
s3, introducing the sub-menu components into the branch menu of the sub-menu components to meet the requirement of infinite number of stages;
s4, adding menu parameters in the self control quoted in the step S3, and using the menu parameters to transfer the content of the submenu and open the menu;
the implementation code that references its components is as follows:
<eb-menu[menu]＝"men.children"(jointab)＝"addtab($event)"></eb-menu>
wherein [ menu ] = "men. child" is a sub-menu content, and (jointab) ═ addtab ($ event) "is an opening method;
the menu parameters at least comprise the name of each current menu and whether a next-level submenu exists, and after the control is quoted, the menu parameters can be used for realizing that if the current menu has the next-level submenu (namely, a branch menu), the sub-menu components are quoted in a circulating mode automatically and the parameters of the next-level submenu are added, and if the current menu does not have the next-level submenu (namely, a leaf menu), the sub-menu components are quoted automatically;
the code of the completed whole sub-menu component is as follows:
the length (length) of the next level submenu in the leaf menu is set to be 0, when the length is not 0, the next level submenu is shown in the current menu and is a branch menu, the system automatically and circularly refers to the submenu component, and the next level submenu is expanded; when the length is 0, it indicates that the current menu has no next-level submenu and is a leaf menu, the system finishes circularly referring to the submenu component and only displays the current menu, namely, no next-level submenu;
and S5, adding the sub-menu component to the navigation menu to realize a multi-level transverse expansion menu.
The implementation code is as follows:
fig. 3 is a schematic view of a navigation menu in the prior art, and please refer to fig. 4 for a schematic view of a horizontal multi-level menu expansion implemented in an embodiment of the present invention.
Based on the same inventive concept, the application also provides a device corresponding to the method in the first embodiment, which is detailed in the second embodiment.
Example two
In this embodiment, an apparatus for generating a multi-level horizontally expanded menu based on ng-zorro is provided, as shown in fig. 5, including: the navigation menu generation module, the sub-menu component cyclic reference module and the menu integration module;
the navigation menu generation module is used for defining a navigation menu through ng-zorro, and the navigation menu only has a first level and is in a transverse expansion mode;
the sub-menu component generating module is used for defining a sub-menu component, and the sub-menu component is used for displaying a next-level sub-menu of the current menu;
the sub-menu component cyclic reference module is used for referencing the sub-menu components in the sub-menu components and adding menu parameters, wherein the menu parameters comprise the name of each current menu and whether a next-level sub-menu exists or not, and is used for realizing that if the current menu has the next-level sub-menu, the sub-menu components are cyclically referenced automatically and the next-level sub-menu parameters are added, and if the current menu does not have the next-level sub-menu, the sub-menu components are automatically referred to;
and the menu integration module is used for adding the sub-menu component to the navigation menu to realize a multi-level transverse expansion menu.
In one possible implementation manner, the sub-menu component includes a leaf menu and a branch menu, the leaf menu has no next-level sub-menu, and the branch menu is provided with a next-level sub-menu;
and quoting the sub-menu components and adding menu parameters in the sub-menu components, and further specifically quoting the sub-menu components and adding menu parameters in branch menus of the sub-menu components.
Since the apparatus described in the second embodiment of the present invention is an apparatus used for implementing the method of the first embodiment of the present invention, based on the method described in the first embodiment of the present invention, a person skilled in the art can understand the specific structure and the deformation of the apparatus, and thus the details are not described herein. All the devices adopted in the method of the first embodiment of the present invention belong to the protection scope of the present invention.
Based on the same inventive concept, the application provides an electronic device embodiment corresponding to the first embodiment, which is detailed in the third embodiment.
EXAMPLE III
The present embodiment provides a computer-readable storage medium, as shown in fig. 6, on which a computer program is stored, and when the computer program is executed by a processor, any one of the embodiments can be implemented.
According to the embodiment of the application, the sub-menu components are quoted in the sub-menu components and the menu parameters are added, so that the sub-menu components are quoted automatically and circularly when the current menu has the next-level sub-menu, the multi-level transverse expansion menu is realized, the fixed level limitation is avoided, and the problem that the transverse expansion menu cannot be generated dynamically is successfully solved; as of the filing date of the present invention, the ng-zorro authority has not repaired the problem, and even if repairs are made in the future, it will be imperative to update a new version of ng-zorro, which may cause compatibility problems, and most programmers will not choose an update, and the present invention will still have value.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, apparatus, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
Although specific embodiments of the invention have been described above, it will be understood by those skilled in the art that the specific embodiments described are illustrative only and are not limiting upon the scope of the invention, and that equivalent modifications and variations can be made by those skilled in the art without departing from the spirit of the invention, which is to be limited only by the appended claims.
Claims (5)
1. A method for generating a multi-level horizontally expanded menu based on ng-zorro is characterized by comprising the following steps: the method comprises the following steps:
defining a navigation menu through ng-zorro, wherein the navigation menu only has a first level and the mode is horizontal expansion;
defining a sub-menu component, wherein the sub-menu component is used for displaying a next level sub-menu of the current menu;
the sub-menu components are quoted in the sub-menu components and menu parameters are added, the menu parameters comprise the name of each current menu and whether a next-level sub-menu exists or not, the sub-menu components are quoted in an automatic circulation mode and the parameters of the next-level sub-menu are added if the current menu has the next-level sub-menu, and the sub-menu components are quoted automatically when the current menu does not have the next-level sub-menu;
and adding the sub-menu component to the navigation menu to realize a multi-level transverse expansion menu.
2. The method of claim 1, wherein the method comprises:
the submenu component comprises a leaf menu and a branch menu, the leaf menu has no next level submenu, and the branch menu is provided with a next level submenu;
and quoting the sub-menu components and adding menu parameters in the sub-menu components, and further specifically quoting the sub-menu components and adding menu parameters in branch menus of the sub-menu components.
3. An apparatus for generating a multi-level horizontally expanded menu based on ng-zorro, comprising: the navigation menu generation module, the sub-menu component cyclic reference module and the menu integration module;
the navigation menu generation module is used for defining a navigation menu through ng-zorro, and the navigation menu only has a first level and is in a transverse expansion mode;
the sub-menu component generating module is used for defining a sub-menu component, and the sub-menu component is used for displaying a next-level sub-menu of the current menu;
the sub-menu component cyclic reference module is used for referencing the sub-menu components in the sub-menu components and adding menu parameters, wherein the menu parameters comprise the name of each current menu and whether a next-level sub-menu exists or not, and is used for realizing that if the current menu has the next-level sub-menu, the sub-menu components are cyclically referenced automatically and the next-level sub-menu parameters are added, and if the current menu does not have the next-level sub-menu, the sub-menu components are automatically referred to;
and the menu integration module is used for adding the sub-menu component to the navigation menu to realize a multi-level transverse expansion menu.
4. The apparatus for generating a multi-level horizontally expanded menu based on ng-zorro as claimed in claim 1, wherein:
the submenu component comprises a leaf menu and a branch menu, the leaf menu has no next level submenu, and the branch menu is provided with a next level submenu;
and quoting the sub-menu components and adding menu parameters in the sub-menu components, and further specifically quoting the sub-menu components and adding menu parameters in branch menus of the sub-menu components.
5. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the method according to any one of claims 1 to 2.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011101923.8A CN112416341A (en) | 2020-10-15 | 2020-10-15 | Method, device and medium for generating multi-level transversely-expanded menu based on ng-zorro |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011101923.8A CN112416341A (en) | 2020-10-15 | 2020-10-15 | Method, device and medium for generating multi-level transversely-expanded menu based on ng-zorro |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112416341A true CN112416341A (en) | 2021-02-26 |
Family
ID=74855263
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011101923.8A Pending CN112416341A (en) | 2020-10-15 | 2020-10-15 | Method, device and medium for generating multi-level transversely-expanded menu based on ng-zorro |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112416341A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114840115A (en) * | 2022-04-11 | 2022-08-02 | 杭州云合智网技术有限公司 | Method for realizing multi-level menu navigation interface |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040046804A1 (en) * | 2002-09-11 | 2004-03-11 | Chang Peter H. | User-driven menu generation system with multiple submenus |
| CN109471685A (en) * | 2017-09-08 | 2019-03-15 | 北京国双科技有限公司 | The methods of exhibiting and device of drop-down menu |
-
2020
- 2020-10-15 CN CN202011101923.8A patent/CN112416341A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040046804A1 (en) * | 2002-09-11 | 2004-03-11 | Chang Peter H. | User-driven menu generation system with multiple submenus |
| CN109471685A (en) * | 2017-09-08 | 2019-03-15 | 北京国双科技有限公司 | The methods of exhibiting and device of drop-down menu |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114840115A (en) * | 2022-04-11 | 2022-08-02 | 杭州云合智网技术有限公司 | Method for realizing multi-level menu navigation interface |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| TWI710916B (en) | Database status determination method, consistency verification method and device | |
| US8789009B2 (en) | EMF model synchronization method and system | |
| CN111796821A (en) | Page updating method and device | |
| CN112416341A (en) | Method, device and medium for generating multi-level transversely-expanded menu based on ng-zorro | |
| CN113535141A (en) | Database operation code generation method and device | |
| CN105260184B (en) | A kind of adjustment method and device for restoring image file | |
| CN114115016A (en) | Data processing method, device, equipment and medium | |
| CN108228836B (en) | Video compatible loading method and device and video component | |
| CN116402165A (en) | Operator detection method and device, storage medium and electronic equipment | |
| CN116107563A (en) | Method and related device for acquiring low-code application program | |
| CN103593190A (en) | Application processing method and device | |
| CN108958823A (en) | The method for modifying basic input output system setting value | |
| CN110782389B (en) | Image data byte alignment method and terminal | |
| CN109669738B (en) | A kind of starting method and device of application program | |
| CN105159619A (en) | Virtual memory extension method and apparatus | |
| CN108875086B (en) | Matching method and system of URI path resources | |
| CN105938431A (en) | Web page developing method and device | |
| CN107608698B (en) | Command line tool updating method and device | |
| CN108733401B (en) | Method and device for realizing browser compatibility | |
| CN113590224B (en) | Method and device for detecting server, electronic equipment and storage medium | |
| CN105279052B (en) | A kind of stability test method and apparatus of iOS system | |
| CN116150530B (en) | Three-dimensional data management loading method and system based on visual field | |
| CN117519912B (en) | Mirror image warehouse deployment method, device, storage medium and equipment | |
| CN116775171B (en) | Architecture switching method and device, electronic equipment and storage medium | |
| CN113792247B (en) | Method, apparatus, device and medium for generating functional flow chart based on code characteristics |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |