blocks|key|2346419|text|在深入研究这一点之后，我觉得原始的解决方案非常复杂，必须有更好的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2346420|2346421|最初的方法是主要从视图控制层次结构...|unordered-list-item|2346422|This是错误的approach.|offset|length|style|BOLD|2346423|2346424|修改后的方法基于基于数组层次结构驱动视图的概念……这使得解决方案更加清晰，具有更好的可伸缩性。|2346425|2346426|定义数组层次结构...这里的关键是将带有子菜单的选项分配给rootTab索引，该索引将在单击时保存子菜单选项。|CODE|2346427|rootTabs+=+[
++++{
++++++id:+0,
++++++options:+[
++++++++{+option:+'Home'+},
++++++++{+option:+'Parámetros'+},
++++++++{+option:+'Operativa'+},
++++++++{+option:+'Productos'+},
++++++++{+option:+'Invocación+Servicios',+rootTab:+1+}
++++++]
++++},
++++{
++++++id:+1,
++++++options:+[
++++++++{+option:+'Portal+1',+rootTab:+2+},
++++++++{+option:+'Portal+2',+rootTab:+4+},
++++++++{+option:+'Portal+3',+rootTab:+5+}
++++++]
++++},
++++{
++++++id:+2,
++++++options:+[
++++++++{+option:+'Service+1+Item1',+route:+'/Submenu1'+},
++++++++{+option:+'Service+1+Item2',+route:+'/Submenu2'+},
++++++++{+option:+'Service+1+Item3',+route:+'/Submenu3'+},
++++++++{+option:+'Service+1+Item4',+route:+'/Submenu4'+},
++++++++{+option:+'Service+1+Item5',+route:+'/Submenu5'+},
++++++++{+option:+'Invocación+Servicios',+rootTab:+3+}
++++++]
++++},
++++{
++++++id:+3,+options:+[
++++++++{+option:+'put+additional+options+here'+}
++++++]
++++},
++++{
++++++id:+4,
++++++options:+[
++++++++{+option:+'Service+2+Item1',+route:+'/Submenu1'+},
++++++++{+option:+'Service+2+Item2',+route:+'/Submenu2'+},
++++++++{+option:+'Service+2+Item3',+route:+'/Submenu3'+},
++++++++{+option:+'Service+2+Item4',+route:+'/Submenu4'+},
++++++++{+option:+'Service+2+Item5',+route:+'/Submenu5'+},
++++++]
++++},
++++{
++++++id:+5,
++++++options:+[
++++++++{+option:+'Service+3+Item1',+route:+'/Submenu1'+},
++++++++{+option:+'Service+3+Item2',+route:+'/Submenu2'+},
++++++++{+option:+'Service+3+Item3',+route:+'/Submenu3'+},
++++++++{+option:+'Service+3+Item4',+route:+'/Submenu4'+},
++++++++{+option:+'Service+3+Item5',+route:+'/Submenu5'+},
++++++]
++++}
++]|code-block|syntax|javascript|2346428|创建组件方法以通过UI交互处理菜单状态。|2346429|rootSelected(optionIndex,+optionRootIndex,+rootOption)+{
++++this.numItemsSelected%2B%2B;
++++this.previousRootTab+=+this.currentSelectedRootTab;
++++this.currentSelectedRootTab+=+optionRootIndex;
++++this.indexClicked+=+optionIndex;
++++if+(!this.breadcrumb1)+{
++++++this.breadcrumb1+=+rootOption
++++}+else+if+(!this.breadcrumb2)+{
++++++this.breadcrumb2+=+rootOption
++++}+else+{
++++++this.breadcrumb3+=+rootOption
++++}
++}

++back2Main()+{
++++this.currentSelectedRootTab+=+0;
++++this.previousRootTab+=+0;
++++this.indexClicked+=+0;

++++this.numItemsSelected+=+0;
++++this.breadcrumb1+=+null;
++++this.breadcrumb2+=+null;
++++this.breadcrumb3+=+null;
++}

++toBreadcrum1()+{
++++if+(this.numItemsSelected+>+1)+{
++++++this.currentSelectedRootTab+=+this.breadcrumb1.rootTab;
++++++this.breadcrumb2+=+null;
++++++this.numItemsSelected--
++++}
++}

++toBreadcrum2()+{
++++if+(this.numItemsSelected+>+2)+{
++++++this.currentSelectedRootTab+=+this.breadcrumb2.rootTab;
++++++this.breadcrumb3+=+null;
++++++this.numItemsSelected--
++++}
++}|2346430|在模板中将其全部连接起来|2346431|<div+style="display:+flex;flex-direction:+row;margin:1%25+;height:30px;">
++++<div+routerLink="/"+routerLinkActive="active"+(click)="back2Main()"+style="cursor:pointer"+class="vertical-align-text">Main</div>
++++<div+*ngIf="numItemsSelected+>=+1">&nbsp;<mat-icon>chevron_right</mat-icon></div>
++++<span+*ngIf="numItemsSelected+>=+1"+routerLink="/"+routerLinkActive="active"+class="vertical-align-text"+style="cursor:pointer;vertical-align:+middle;"+(click)="toBreadcrum1();">&nbsp;{{breadcrumb1.option}}</span>
++++<div+*ngIf="numItemsSelected+>=+2">&nbsp;<mat-icon>chevron_right</mat-icon></div>
+++<span+*ngIf="numItemsSelected+>=+2"+routerLink="/"+routerLinkActive="active"+class="vertical-align-text"+style="cursor:pointer"+(click)="toBreadcrum2();">&nbsp;{{breadcrumb2.option}}</span>
++++<div+*ngIf="numItemsSelected+>=+3">&nbsp;<mat-icon>chevron_right</mat-icon></div>
+++<span+*ngIf="numItemsSelected+>=+3"+routerLink="/"+routerLinkActive="active"+class="vertical-align-text"+style="cursor:pointer"+(click)="toBreadcrum3();">&nbsp;{{breadcrumb3.option}}</span>
+++</div>


<div+style="display:+flex;flex-direction:+row;background-color:white;+height:100vh">
++++<mat-tab-group+class="navigation-tabs"+[selectedIndex]="currentSelectedRootTab"+dynamicHeight+style="width:25vw;+background-color:lightgray">
++++++++<mat-tab+*ngFor="let+rootTab+of+rootTabs;+let+rootIndex+=+index"+[label]="rootIndex">
++++++++++++<mat-nav-list>
++++++++<div+*ngFor="let+rootOption+of+rootTab.options;+let+optionIndex+=+index;">+++++++
++++++++++<a+mat-list-item+*ngIf="!rootOption.rootTab"+[routerLink]="rootOption.route"+routerLinkActive="active">{{rootOption.option}}</a>
++++++++++<a+mat-list-item+style="width:100%25"+*ngIf="rootOption.rootTab"+(click)="rootSelected(optionIndex,+rootOption.rootTab,+rootOption)">{{rootOption.option}}<div><mat-icon+style="padding-left:20%25;vertical-align:+middle;">chevron_right</mat-icon></div></a>
++++++++</div>+
++++++++++++</mat-nav-list>
++++++++</mat-tab>
++++</mat-tab-group>
++<div+style="margin:auto">
++++<router-outlet></router-outlet>+
++</div>
</div>|2346432|Stackblitz|2346433|https://stackblitz.com/edit/angular-x5xefi-gmzy46?embed=1&file=app/tab-group-basic-example.html|2346434|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|G|0|0|0|0|T|7|0|0|0|0|0|0|0|A|0|0|2N|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1I|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|1J|8|@$H|1K|I|1L|J|K]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1N|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1P|8|@$H|1Q|I|1R|J|R]]|9|@]|A|$]]|$1|S|3|T|5|U|7|1S|8|@]|9|@]|A|$V|W]]|$1|X|3|Y|5|6|7|1T|8|@]|9|@]|A|$]]|$1|Z|3|10|5|U|7|1U|8|@]|9|@]|A|$V|W]]|$1|11|3|12|5|6|7|1V|8|@]|9|@]|A|$]]|$1|13|3|14|5|U|7|1W|8|@]|9|@]|A|$V|W]]|$1|15|3|16|5|6|7|1X|8|@$H|1Y|I|1Z|J|K]]|9|@]|A|$]]|$1|17|3|18|5|6|7|20|8|@]|9|@$H|21|I|22|1|23]]|A|$]]|$1|19|3|-4|5|6|7|24|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|18]]]]

<p>After looking into this further I felt the original solution was overtly complicated, and there had to be a better way.</p>

<ul>
<li>The original approach was to control the hierarchy mainly from the
view... </li>
<li><strong>This was the wrong approach</strong>.</li>
</ul>

<p>The revised approach is based on the concept of driving the view based on array hierarchy... this makes for a much cleaner solution with better scale-ability.</p>

<hr>

<p>Define array hierarchy... the key here is to assign options with sub menus to <code>rootTab</code> indexes that will hold the sub menu options when clicked..</p>

<pre><code>rootTabs = [
    {
      id: 0,
      options: [
        { option: 'Home' },
        { option: 'Parámetros' },
        { option: 'Operativa' },
        { option: 'Productos' },
        { option: 'Invocación Servicios', rootTab: 1 }
      ]
    },
    {
      id: 1,
      options: [
        { option: 'Portal 1', rootTab: 2 },
        { option: 'Portal 2', rootTab: 4 },
        { option: 'Portal 3', rootTab: 5 }
      ]
    },
    {
      id: 2,
      options: [
        { option: 'Service 1 Item1', route: '/Submenu1' },
        { option: 'Service 1 Item2', route: '/Submenu2' },
        { option: 'Service 1 Item3', route: '/Submenu3' },
        { option: 'Service 1 Item4', route: '/Submenu4' },
        { option: 'Service 1 Item5', route: '/Submenu5' },
        { option: 'Invocación Servicios', rootTab: 3 }
      ]
    },
    {
      id: 3, options: [
        { option: 'put additional options here' }
      ]
    },
    {
      id: 4,
      options: [
        { option: 'Service 2 Item1', route: '/Submenu1' },
        { option: 'Service 2 Item2', route: '/Submenu2' },
        { option: 'Service 2 Item3', route: '/Submenu3' },
        { option: 'Service 2 Item4', route: '/Submenu4' },
        { option: 'Service 2 Item5', route: '/Submenu5' },
      ]
    },
    {
      id: 5,
      options: [
        { option: 'Service 3 Item1', route: '/Submenu1' },
        { option: 'Service 3 Item2', route: '/Submenu2' },
        { option: 'Service 3 Item3', route: '/Submenu3' },
        { option: 'Service 3 Item4', route: '/Submenu4' },
        { option: 'Service 3 Item5', route: '/Submenu5' },
      ]
    }
  ]
</code></pre>

<p>Create component methods to handle menu state via UI interaction.</p>

<pre><code>rootSelected(optionIndex, optionRootIndex, rootOption) {
    this.numItemsSelected++;
    this.previousRootTab = this.currentSelectedRootTab;
    this.currentSelectedRootTab = optionRootIndex;
    this.indexClicked = optionIndex;
    if (!this.breadcrumb1) {
      this.breadcrumb1 = rootOption
    } else if (!this.breadcrumb2) {
      this.breadcrumb2 = rootOption
    } else {
      this.breadcrumb3 = rootOption
    }
  }

  back2Main() {
    this.currentSelectedRootTab = 0;
    this.previousRootTab = 0;
    this.indexClicked = 0;

    this.numItemsSelected = 0;
    this.breadcrumb1 = null;
    this.breadcrumb2 = null;
    this.breadcrumb3 = null;
  }

  toBreadcrum1() {
    if (this.numItemsSelected &gt; 1) {
      this.currentSelectedRootTab = this.breadcrumb1.rootTab;
      this.breadcrumb2 = null;
      this.numItemsSelected--
    }
  }

  toBreadcrum2() {
    if (this.numItemsSelected &gt; 2) {
      this.currentSelectedRootTab = this.breadcrumb2.rootTab;
      this.breadcrumb3 = null;
      this.numItemsSelected--
    }
  }
</code></pre>

<p>Wire it all up in the template</p>

<pre><code>&lt;div style="display: flex;flex-direction: row;margin:1% ;height:30px;"&gt;
    &lt;div routerLink="/" routerLinkActive="active" (click)="back2Main()" style="cursor:pointer" class="vertical-align-text"&gt;Main&lt;/div&gt;
    &lt;div *ngIf="numItemsSelected &gt;= 1"&gt;&amp;nbsp;&lt;mat-icon&gt;chevron_right&lt;/mat-icon&gt;&lt;/div&gt;
    &lt;span *ngIf="numItemsSelected &gt;= 1" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer;vertical-align: middle;" (click)="toBreadcrum1();"&gt;&amp;nbsp;{{breadcrumb1.option}}&lt;/span&gt;
    &lt;div *ngIf="numItemsSelected &gt;= 2"&gt;&amp;nbsp;&lt;mat-icon&gt;chevron_right&lt;/mat-icon&gt;&lt;/div&gt;
   &lt;span *ngIf="numItemsSelected &gt;= 2" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer" (click)="toBreadcrum2();"&gt;&amp;nbsp;{{breadcrumb2.option}}&lt;/span&gt;
    &lt;div *ngIf="numItemsSelected &gt;= 3"&gt;&amp;nbsp;&lt;mat-icon&gt;chevron_right&lt;/mat-icon&gt;&lt;/div&gt;
   &lt;span *ngIf="numItemsSelected &gt;= 3" routerLink="/" routerLinkActive="active" class="vertical-align-text" style="cursor:pointer" (click)="toBreadcrum3();"&gt;&amp;nbsp;{{breadcrumb3.option}}&lt;/span&gt;
   &lt;/div&gt;


&lt;div style="display: flex;flex-direction: row;background-color:white; height:100vh"&gt;
    &lt;mat-tab-group class="navigation-tabs" [selectedIndex]="currentSelectedRootTab" dynamicHeight style="width:25vw; background-color:lightgray"&gt;
        &lt;mat-tab *ngFor="let rootTab of rootTabs; let rootIndex = index" [label]="rootIndex"&gt;
            &lt;mat-nav-list&gt;
        &lt;div *ngFor="let rootOption of rootTab.options; let optionIndex = index;"&gt;       
          &lt;a mat-list-item *ngIf="!rootOption.rootTab" [routerLink]="rootOption.route" routerLinkActive="active"&gt;{{rootOption.option}}&lt;/a&gt;
          &lt;a mat-list-item style="width:100%" *ngIf="rootOption.rootTab" (click)="rootSelected(optionIndex, rootOption.rootTab, rootOption)"&gt;{{rootOption.option}}&lt;div&gt;&lt;mat-icon style="padding-left:20%;vertical-align: middle;"&gt;chevron_right&lt;/mat-icon&gt;&lt;/div&gt;&lt;/a&gt;
        &lt;/div&gt; 
            &lt;/mat-nav-list&gt;
        &lt;/mat-tab&gt;
    &lt;/mat-tab-group&gt;
  &lt;div style="margin:auto"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt; 
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Stackblitz</strong></p>

<p><a href="https://stackblitz.com/edit/angular-x5xefi-gmzy46?embed=1&amp;file=app/tab-group-basic-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-x5xefi-gmzy46?embed=1&amp;file=app/tab-group-basic-example.html</a></p>


<p>I managed to do that in my side with Angular Material, it worked with sub-menus that were deployed with dropdowns, but I'm looking for a way to make them not "Dropdowns", I'm looking for them to be like a kind of transition towards right, Something like this: </p>

<p><a href="https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html#!/demo/views/item-2" rel="nofollow noreferrer">https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html#!/demo/views/item-2</a></p>

<p>But this one is done in AngularJS 1.X. I am using Angular 5, does anyone come up with any way or where to start? Thank you!</p>


Angular 5 Material Multi-level Carousel style SideNav Menu (no dropdown)

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我用Angular材质成功地做到了这一点，它与使用下拉菜单部署的子菜单一起工作，但我正在寻找一种方法来使它们不是“下拉菜单”，我正在寻找一种向右过渡的方式，就像这样：但这是在AngularJS 1.X中完成的。我使用的是Angular 5，有谁能想出任何方法或从哪里开始吗？谢谢!

Angular 5材质多级旋转木马样式SideNav菜单(无下拉菜单)-腾讯云开发者社区-腾讯云

问Angular 5材质多级旋转木马样式SideNav菜单(无下拉菜单)
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 5材质多级旋转木马样式SideNav菜单(无下拉菜单)EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 5材质多级旋转木马样式SideNav菜单(无下拉菜单)
EN