меню Angular2 многоуровневое выпадающее не работает

У меня есть эта проблема, уровень два не появляется в выпадающем спискеменю Angular2 многоуровневое выпадающее не работает

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.

источник

2016-05-10 Marcos José Pérez Pérez

Я вижу несколько способ сделать это: делегация

1) Используйте событие:

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

См plunker пример здесь https://plnkr.co/edit/O6pfV7mrLWiGZ2KHwqh8?p=preview

2) Init обработчики событий после того, как angular2 был произведен рендеринг

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

См plunker пример здесь https://plnkr.co/edit/2DRVOGhcIMkTgQHTM57d?p=preview

3) Используйте angular2 подход вместо JQuery манипуляции:

корневой компонент

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' 
    } 
    ]; 
}

элемент меню

import {Component, Input, forwardRef, ViewChildren} from '@angular/core' 

interface MenuItem { 
    title: string; 
    items: Array<MenuItem> 
} 

@Component({ 
    selector: 'li.menu-item', 
    styles: [` 
    .block { 
     display: block; 
    } 
    `], 
    template: ` 
    <a [ngClass]="{'right-caret': !!data.items && !opened, 'left-caret': !!data.items && opened}" (click)="onClick($event)">{{data.title}}</a> 
    <template [ngIf]="!!data.items"> 
    <ul class="dropdown-menu sub-menu" [ngClass]="{'block': opened}"> 
    <li class="menu-item" *ngFor="let menuItem of data.items" [data]="menuItem"> 
    </li> 
    </ul> 
    </template> 
    `, 
    directives: [forwardRef(()=> MenuItem)] 
}) 
export class MenuItem { 
    @Input() data: MenuItem; 
    @ViewChildren(MenuItem) children:QueryList<MenuItem>; 
    private _opened: boolean = false; 
    get opened() { 
    return this._opened; 
    }; 
    set opened(val) { 
    this._opened = val; 
    if(!val) { 
     this.children.toArray().forEach(x => x.opened = false) 
    } 
    } 
    onClick(e){ 
    this.opened = !this.opened; 
    if(this.data.items) { 
     e.stopPropagation(); 
    } 
    } 
}

Вот ссылка на рабочий пример plunker code

источник

2016-05-10 20:19:53 yurzui

Спасибо @yorzui, хорошо, что я знаю, что мне нужно узнать больше углового2, кода excelente. –

@yurzui; @Marcos José Pérez Pérez: Я только начинаю с Angular 2. Я пробовал код на plunker @ https://plnkr.co/edit/zG0Q5Q3dsmJqsplZKG7e?p=preview. И он, похоже, не работает. Я получаю две ошибки: 1.) angular2-polyfills.js: 349 Ошибка: ошибка XHR (404) загрузка https://npmcdn.com/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js (...) [Это в плункере. Я исправил его в своем коде.] 2.) browser_adapter.ts: 78 ИСКЛЮЧЕНИЕ: Ошибка: не доступно (в обещании): ObjectUnsubscribedError (я думаю, что проблема в href проблема). Также событие click не регистрируется. –

@yurzui! Благодаря..но я все равно получаю сообщение об ошибке «ИСКЛЮЧЕНИЕ: Ошибка: нечистить (в обещании): ObjectUnsubscribedError», когда я нажимаю раскрывающееся меню. Кажется, это хорошо в вашем плунжере. Я не уверен, почему я получил его в своем проекте. –

Почему вы не просто подключить SmartMenu (http://www.smartmenus.org), очень просто, после того, как все закончилось

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

Это мобильный/планшет/ipad дружественный и справиться с большинством браузеров

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

Проверьте наш код: https://github.com/Longfld/DynamicaLoadMultiLevelDropDownMenu

источник

2016-10-11 09:52:34

меню Angular2 многоуровневое выпадающее не работает

ответ

Смежные вопросы