Question

我有这个问题，二级没有出现在下拉列表中

index. html

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('app')
          .catch(console.error.bind(console));
      $(function(){
        $(".dropdown-menu > li > a.trigger").on("click",function(e){
            var current=$(this).next();
            var grandparent=$(this).parent().parent();
            if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
                $(this).toggleClass('right-caret left-caret');
            grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
            grandparent.find(".sub-menu:visible").not(current).hide();
            current.toggle();
            e.stopPropagation();
        });
        $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
            var root=$(this).closest('.dropdown');
            root.find('.left-caret').toggleClass('right-caret left-caret');
            root.find('.sub-menu:visible').hide();
        });
    });
      </script>

  </head>

  <body>
    <my-app>

  </my-app>

  </body>



</html>

---------------------------------------------------------------------
app.ts

    //our root app component
    import {Component} from '@angular/core'

    @Component({
      selector: 'my-app',
      providers: [],
      template: `
       <div class="dropdown" style="position:relative">
        <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <a class="trigger right-caret">Level 1 the other level dont enter</a>
                <ul class="dropdown-menu sub-menu">
                    <li><a href="#">Level 2</a></li>
                    <li>
                        <a class="trigger right-caret">Level 2</a>
                        <ul class="dropdown-menu sub-menu">
                            <li><a href="#">Level 3</a></li>
                            <li><a href="#">Level 3</a></li>
                            <li>
                                <a class="trigger right-caret">Level 3</a>
                                <ul class="dropdown-menu sub-menu">
                                    <li><a href="#">Level 4</a></li>
                                    <li><a href="#">Level 4</a></li>
                                    <li><a href="#">Level 4</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Level 2</a></li>
                </ul>
            </li>
            <li><a href="#">Level 1</a></li>
            <li><a href="#">Level 1</a></li>
        </ul>
    </div>
      `,
      directives: []
    })
    export class App {
      constructor() {
        this.name = 'Angular2 (Release Candidate!)'
      }
    }

main.ts

//main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';

bootstrap(App, [])
  .catch(err => console.error(err));

https://plnkr.co/edit/9LVuek8bQ7mNgoqaC5Y6?p=preview

下拉列表工作正常，但是如果我在渲染html时将代码添加到模板中的角度组件，并且导航到下拉列表时不显示级别2.

Answer 1

我看到了几种方法：

1）使用事件委托：

true

请参阅此处的plunker示例https://plnkr.co/edit/O6pfV7mrLWiGZ2KHwqh8?p=preview

2）渲染angular2视图后的Init事件处理程序

$(document).on("click", ".dropdown-menu > li > a.trigger", function(e){

请参阅此处的plunker示例https://plnkr.co/edit/2DRVOGhcIMkTgQHTM57d?p=preview

3）使用angular2方法代替jQuery操作：

根组件

export class App {
  ngAfterViewInit() {
   this.initMenu();
  }
  initMenu() {
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
            var current=$(this).next();
    ...

菜单项组件

import {Component} from '@angular/core'
import {MenuItem} from './menu-item.component';

@Component({
  selector: 'my-app',
  template: `
   <div class="dropdown" style="position:relative">
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li class="menu-item" *ngFor="let menuItem of menu" [data]="menuItem"></li>
    </ul>
</div>
  `,
  directives: [MenuItem]
})
export class App {
  menu = [
    {
      title: 'Level 1 the other level dont enter'
      items: [
         {
            title: 'Level 2'
         },
         {
            title: 'Level 2',
            items: [
               {
                  title: 'Level 3'
               },
               {
                  title: 'Level 3'
               },
               {
                  title: 'Level 3',
                  items: [
                     {
                        title: 'Level 4'
                     },
                     {
                        title: 'Level 4'
                     },
                     {
                        title: 'Level 4'
                     }
                  ]
               }
            ]
         },
         {
            title: 'Level 2'
         }
      ]
    },
    {
      title: 'Level 1'
    },
        {
      title: 'Level 1'
    }
  ];
}

以下是工作示例plunker code

的链接

Answer 2

为什么不在完成所有事情后非常简单地插入smartmenu（http://www.smartmenus.org）

   ngAfterViewChecked() {
        $('#main-menu').smartmenus();
   }

移动/平板电脑/ ipad友好，可以应对大多数浏览器

http://plnkr.co/edit/wLqLUoBQYgcDwOgSoRfF?p=preview

点击此处查看我的代码：https://github.com/Longfld/DynamicaLoadMultiLevelDropDownMenu

Angular2菜单多级下拉列表不起作用

2 个答案: