2016-05-13 3 views
2

Я использую PrimeNG (1.0.0-beta.5) PanelMenu с Угловое RC 2.0.0-RC.1 версииPrimeNG PanelMenu routerLink вопрос

Ниже приведен пример кода меню панели PrimeNG. Когда я нажимаю на ссылки Project или Welcome, он обновляет всю мою страницу, а затем загружает соответствующий компонент.

<p-panelMenu id="panelMenu"> 
    <div> 
     <div><a data-icon="fa-file-o"><span>Report</span></a></div> 
     <div> 
      <ul> 
       <li><a data-icon="fa-plus"><span>New</span></a> 
        <ul> 
         <li><a [routerLink]="['Project']" (click)="mobileMenuActive = false">Project</a></li> 
         <li><a [routerLink]="['Welcome']" (click)="mobileMenuActive = false">Welcome</a></li> 
        </ul> 
       </li> 
       <li><a [routerLink]="['Project']">Project</a></li> 
       <li><a><span>Quit</span></a></li> 
      </ul> 
     </div> 
    </div> 
</p-panelMenu> 

Когда я использую элемент nav, как показано ниже, он правильно вызывает соответствующий компонент без обновления страницы.

<nav> 
      <div class='container-fluid'> 
       <ul class='nav navbar-nav'> 
        <li><a [routerLink]="['Welcome']">Home</a></li> 
        <li><a [routerLink]="['Project']">Product List</a></li> 
       </ul> 
      </div> 
</nav> 

Любая идея, что мне не хватает в реализации панельного меню primeNG?

Приветствия Sanket

+0

Пожалуйста, попробуйте с бета7, новый menuitem api имеет выделенное свойство routerLink для этого. –

ответ

0

Я использую primeng версии beta.6 и до сих пор этот вопрос. Вся страница обновляется, когда я перехожу из меню (а не только к области выхода маршрутизатора).

HTML:

<p-tabMenu class="ui-tabmenu" [model]="items"></p-tabMenu> 

TS:

ngOnInit() { 
     this.items = [  
      { label: 'Notes', icon: 'fa-file-o', url: ['Page1'] }, 
      { label: 'Companies', icon: 'fa-edit', url: ['Page2'] }, 
      { label: 'Google', icon: 'fa-plus', url: 'http://www.google.com' } 
     ]; 
    } 

Я только хочу, чтобы обновить область просмотра, а не обновить меню. Это проблема в бета-версии 6?

+0

На данный момент вы нашли обходной путь для этой проблемы. Вместо использования url необходимо использовать команду для записи функции углового router.navigate: {label: 'Notes', icon: 'fa-file-o', command: (click) => {this.router.navigate (['Notes']);}}, –

+0

Beta7 предоставляет выделенный атрибут routerLink для элемента menu apm, такого как routerLink: url: ['Page1'] –

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