blocks|key|1733307|text|我不知道你是否还在寻找角材质的多级菜单，但我找到了一个由ShankyTiwari制作的。下面是GitHub的链接和演示的链接。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1733308|非常容易使用和实现。例如，我在侧边栏中实现了它，因为它不存在有角的材料。如果不是，正如@Dino所说，另一种选择就是PrimeNG。|1733309|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ShankyTiwari/ng-material-multilevel-menu|1|http://plugins.codershood.info/#/plugins/ngmm-plugin^0|1B|6|0|1L|2|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p>I don't know if you are still looking for angular-material-multilevel-menu but I have found one made by ShankyTiwari.
Here is the link for <a href="https://github.com/ShankyTiwari/ng-material-multilevel-menu" rel="noreferrer">GitHub</a> and the link for the <a href="http://plugins.codershood.info/#/plugins/ngmm-plugin" rel="noreferrer">demo</a>.</p>

<p>Very easy to use and to implement. For example, I implemented it in a sidebar because it does not exist with Angular material.
If not an alternative would be PrimeNG as @Dino said.</p>


blocks|key|623303|text|角材料6.0没有提供多层菜单的盒子。你必须自己创造它。这将是嵌套菜单和侧Nav的结合。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|623304|为了回答你的第一个问题，我建议你看看PrimeNG的面板菜单。它能完全满足你的需要，只要付出一点小小的努力，你也可以把它的设计变成像这样的材料。(我是用一些PrimeNG组件完成的，这样我就可以确认它是否有效。|623305|请考虑到PrimeNG+6.0.0目前在阿尔法-2版本中。|blockquote|623306|entityMap|0|LINK|mutability|MUTABLE|url|https://material.angular.io/components/menu/examples|1|https://material.angular.io/components/sidenav/overview|2|https://www.primefaces.org/primeng/#/panelmenu|3|https://www.primefaces.org/primeng-6-0-0-alpha-2-released/^0|U|4|0|Z|4|1|0|I|C|2|0|K|7|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|I|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]|S|$5|L|M|N|C|$O|T]]|U|$5|L|M|N|C|$O|V]]]]

<p>Angular Material 6.0 doesn't come with multilevel menu out of the box. You would have to create it on your own. It would be a combination of <a href="https://material.angular.io/components/menu/examples" rel="nofollow noreferrer">Nested Menu</a>, and <a href="https://material.angular.io/components/sidenav/overview" rel="nofollow noreferrer">Side Nav</a>. </p>

<p>And to answer your first question, I'd suggest you to take a look at <a href="https://www.primefaces.org/primeng/#/panelmenu" rel="nofollow noreferrer">PrimeNG's Panel Menu</a>. It does exactly what you need and with some little effort, you'll also be able to change it's design into Material like. (I did it with some PrimeNG components, so I can confirm that it works. </p>

<blockquote>
  <p>Please take in consideration that PrimeNG 6.0.0 is currently in
  <a href="https://www.primefaces.org/primeng-6-0-0-alpha-2-released/" rel="nofollow noreferrer">Alpha-2 version</a>.</p>
</blockquote>


blocks|key|1858671|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1858672|📷|atomic|offset|length|1858673|1858674|我找到了解决方案的一部分。|1858675|这是一个使用“垫-扩展面板”的演示。|1858676|还有一些问题必须解决。|1858677|扩展级别的阴影和偏移量。|ordered-list-item|1858678|选择关机而不是停留|1858679|这样做更好？|1858680|有什么建议吗？|1858681|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/da224690e0a3e8c318a581a429ee1fba.png|imageAlt|1|LINK|MUTABLE|url|http://94.237.25.207/^0|0|0|1|0|0|0|0|0|I|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1B|8|@]|9|@$E|1C|F|1D|1|1E]]|A|$]]|$1|G|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1H|8|@]|9|@$E|1I|F|1J|1|1K]]|A|$]]|$1|L|3|M|5|6|7|1L|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|P|7|1N|8|@]|9|@]|A|$]]|$1|S|3|T|5|P|7|1O|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1P|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13|14|-4]]|15|$5|16|10|17|A|$18|19]]]]

<p><a href="https://i.stack.imgur.com/cfL28.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cfL28.png" alt="Demo"></a></p>

<p>I found a PART of a solution. </p>

<p><a href="http://94.237.25.207/" rel="nofollow noreferrer">Here is a demo using "mat-expansion-panel"</a></p>

<p>There are still some issues that must be solved.</p>

<ol>
<li>The shadow and offset of the Expansion Level</li>
<li>The shutdown instead of stay selected</li>
<li>Better way to do this?</li>
</ol>

<p>Any suggestions?</p>


blocks|key|1858739|text|我正在寻找创建多个层次的菜单与本地的角度材料，但仍在开发中的ng材料团队。因此，我建议现在使用吴-物料-多级-菜单包，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1858740|npm+install+--save+ng-material-multilevel-menu或yarn+add+--save+ng-material-multilevel-menu|ordered-list-item|style|CODE|1858741|然后通过以下方式导入NgMaterialMultilevelMenuModule|1858742|​|1858743|import+{+BrowserModule+}+from+'@angular/platform-browser';
import+{+NgModule+}+from+'@angular/core';
+
/*+Import+the+module*/
import+{+NgMaterialMultilevelMenuModule+}+from+'ng-material-multilevel-menu';
+
import+{+AppComponent+}+from+'./app.component';
+
@NgModule({
++++declarations:+[
++++AppComponent
++++],
++++imports:+[
++++BrowserModule,
++++NgMaterialMultilevelMenuModule+//+Import+here
++++],
++++providers:+[],
++++bootstrap:+[AppComponent]
})
export+class+AppModule+{+}|code-block|syntax|javascript|1858744|1858745|在html中调用<ng-material-multilevel-menu++[configuration]='config'+[items]='appitems'+(selectedItem)="selectedItem($event)"></ng-material-multilevel-menu>。|1858746|最后，为列表项和appitems对象声明config|1858747|1858748|appitems+=+[
++++{
++++++++label:+'NPM',
++++++++icon:+'favorite',
++++++++link:+'https://www.npmjs.com/package/ng-material-multilevel-menu',
++++++++externalRedirect:+true
++++},
++++{
++++++++label:+'Item+1+(with+Font+awesome+icon)',
++++++++faIcon:+'fab+fa-500px',
++++++++items:+[
++++++++++++{
++++++++++++++++label:+'Item+1.1',
++++++++++++++++link:+'/item-1-1',
++++++++++++++++faIcon:+'fab+fa-accusoft'
++++++++++++},
++++++++++++{
++++++++++++++++label:+'Item+1.2',
++++++++++++++++faIcon:+'fab+fa-accessible-icon',
++++++++++++++++items:+[
++++++++++++++++++++{
++++++++++++++++++++++++label:+'Item+1.2.1',
++++++++++++++++++++++++link:+'/item-1-2-1',
++++++++++++++++++++++++faIcon:+'fas+fa-allergies'
++++++++++++++++++++},
++++++++++++++++++++{
++++++++++++++++++++++++label:+'Item+1.2.2',
++++++++++++++++++++++++faIcon:+'fas+fa-ambulance',
++++++++++++++++++++++++items:+[
++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++label:+'Item+1.2.2.1',
++++++++++++++++++++++++++++++++link:+'item-1-2-2-1',
++++++++++++++++++++++++++++++++faIcon:+'fas+fa-anchor',
++++++++++++++++++++++++++++++++onSelected:+function()+{
++++++++++++++++++++++++++++++++++++console.log('Item+1.2.2.1');
++++++++++++++++++++++++++++++++}
++++++++++++++++++++++++++++}
++++++++++++++++++++++++]
++++++++++++++++++++}
++++++++++++++++]
++++++++++++}
++++++++]
++++},
++++{
++++++++label:+'Item+2',
++++++++icon:+'alarm',
++++++++items:+[
++++++++{
++++++++++++label:+'Item+2.1',
++++++++++++link:+'/item-2-1',
++++++++++++icon:+'favorite'
++++++++},
++++++++{
++++++++++++label:+'Item+2.2',
++++++++++++link:+'/item-2-2',
++++++++++++icon:+'favorite_border'
++++++++}
++++++++]
++++},
++++{
++++++++label:+'Item+3',
++++++++link:+'/item-3',
++++++++icon:+'offline_pin',
++++++++onSelected:+function()+{
++++++++++++console.log('Item+3');
++++++++}
++++},
++++{
++++++++label:+'Item+4',
++++++++link:+'/item-4',
++++++++icon:+'star_rate',
++++++++hidden:+true
++++}
];

++config+=+{
++++paddingAtStart:+false,
++++classname:+'my-custom-class',
++++listBackgroundColor:+'#fafafa',
++++fontColor:+'rgb(8,+54,+71)',
++++backgroundColor:+'#fff',
++++selectedListFontColor:+'red',
++++interfaceWithRoute:+true
++};|1858749|注意:如果链接属性可用，interfaceWithRoute将使根项可链接。|1858750|1858751|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.codershood.info/#/plugins/ngmm-plugin^0|1B|A|0|0|0|1A|1B|17|0|A|U|0|0|0|0|8|3Y|0|8|8|K|6|0|0|0|C|I|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|F|7|1E|8|@$A|1F|B|1G|G|H]|$A|1H|B|1I|G|H]]|9|@]|C|$]]|$1|I|3|J|5|F|7|1J|8|@$A|1K|B|1L|G|H]]|9|@]|C|$]]|$1|K|3|L|5|6|7|1M|8|@]|9|@]|C|$]]|$1|M|3|N|5|O|7|1N|8|@]|9|@]|C|$P|Q]]|$1|R|3|L|5|6|7|1O|8|@]|9|@]|C|$]]|$1|S|3|T|5|F|7|1P|8|@$A|1Q|B|1R|G|H]]|9|@]|C|$]]|$1|U|3|V|5|F|7|1S|8|@$A|1T|B|1U|G|H]|$A|1V|B|1W|G|H]]|9|@]|C|$]]|$1|W|3|L|5|6|7|1X|8|@]|9|@]|C|$]]|$1|X|3|Y|5|O|7|1Y|8|@]|9|@]|C|$P|Q]]|$1|Z|3|10|5|6|7|1Z|8|@$A|20|B|21|G|H]]|9|@]|C|$]]|$1|11|3|L|5|6|7|22|8|@]|9|@]|C|$]]|$1|12|3|-4|5|6|7|23|8|@]|9|@]|C|$]]]|13|$14|$5|15|16|17|C|$18|19]]]]

<p>I was looking to create multi-level menus with native angular material but still under development by ng material team. So, I'd like to suggest to use <a href="http://plugins.codershood.info/#/plugins/ngmm-plugin" rel="nofollow noreferrer">ng-material-multilevel-menu</a> package for now by follow the below:</p>
<ol>
<li><code>npm install --save ng-material-multilevel-menu</code> or <code>yarn add --save ng-material-multilevel-menu</code></li>
<li>Then import <code>NgMaterialMultilevelMenuModule</code> by</li>
</ol>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
/* Import the module*/
import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';
 
import { AppComponent } from './app.component';
 
@NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    BrowserModule,
    NgMaterialMultilevelMenuModule // Import here
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }</code></pre>
</div>
</div>
</p>
<ol start="3">
<li>Call <code>&lt;ng-material-multilevel-menu  [configuration]='config' [items]='appitems' (selectedItem)=&quot;selectedItem($event)&quot;&gt;&lt;/ng-material-multilevel-menu&gt;</code> in your html.</li>
<li>Finally, declare <code>appitems</code> for your list items and <code>config</code> object</li>
</ol>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>appitems = [
    {
        label: 'NPM',
        icon: 'favorite',
        link: 'https://www.npmjs.com/package/ng-material-multilevel-menu',
        externalRedirect: true
    },
    {
        label: 'Item 1 (with Font awesome icon)',
        faIcon: 'fab fa-500px',
        items: [
            {
                label: 'Item 1.1',
                link: '/item-1-1',
                faIcon: 'fab fa-accusoft'
            },
            {
                label: 'Item 1.2',
                faIcon: 'fab fa-accessible-icon',
                items: [
                    {
                        label: 'Item 1.2.1',
                        link: '/item-1-2-1',
                        faIcon: 'fas fa-allergies'
                    },
                    {
                        label: 'Item 1.2.2',
                        faIcon: 'fas fa-ambulance',
                        items: [
                            {
                                label: 'Item 1.2.2.1',
                                link: 'item-1-2-2-1',
                                faIcon: 'fas fa-anchor',
                                onSelected: function() {
                                    console.log('Item 1.2.2.1');
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        label: 'Item 2',
        icon: 'alarm',
        items: [
        {
            label: 'Item 2.1',
            link: '/item-2-1',
            icon: 'favorite'
        },
        {
            label: 'Item 2.2',
            link: '/item-2-2',
            icon: 'favorite_border'
        }
        ]
    },
    {
        label: 'Item 3',
        link: '/item-3',
        icon: 'offline_pin',
        onSelected: function() {
            console.log('Item 3');
        }
    },
    {
        label: 'Item 4',
        link: '/item-4',
        icon: 'star_rate',
        hidden: true
    }
];

  config = {
    paddingAtStart: false,
    classname: 'my-custom-class',
    listBackgroundColor: '#fafafa',
    fontColor: 'rgb(8, 54, 71)',
    backgroundColor: '#fff',
    selectedListFontColor: 'red',
    interfaceWithRoute: true
  };</code></pre>
</div>
</div>

Note: <code>interfaceWithRoute</code>  will enable root item to be linkable if link property is available.</p>


<p>I have tried to achieve a multilevel sidenav and I found this that meets my requirements:</p>

<p><a href="https://www.npmjs.com/package/angular-material-multilevel-menu" rel="noreferrer">angular-material-multilevel-menu</a></p>

<p><a href="https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html#!/demo/readme" rel="noreferrer">Demo</a> - Note the accordion type</p>

<p>Unfortunately this is created for AngularJS (1.0?), which seems to not work in Angular 6.</p>

<p>My questions are:</p>

<ol>
<li>Is there any other multilevel sidenav component for Angular 6? Have note found any similar on Google that works.</li>
<li>Is it possible to "upgrade" this Angular 1.0 menu to Angular 6? How?</li>
<li>Is there any simple instructions or courses to build your own multilevel side nav? There are many instructions for one-level, but I have found none multi-level.</li>
</ol>


An angular-material-multilevel-menu for Angular 6?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图实现一个多层次的sidenav，我发现这符合我的要求： -注意手风琴的类型不幸的是，这是为AngularJS (1.0?)创建的，它似乎不能在角6中工作。我的问题是：还有其他的多电平sidenav元件用于角6吗？在谷歌上也发现了类似的情况。是否有可能“升级”这个角度1.0菜单到角6？多么?是否有任何简单的指示或课程来建立您自己的多级侧导航？有很多关于一级的说明，但我发现没有多层次的。

问角6的角度材料多级菜单？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角6的角度材料多级菜单？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角6的角度材料多级菜单？
EN