2016-05-13 2 views
2

私は角RC 2.0.0-rc.1バージョンの下PrimeNG PanelMenu routerLink問題

でPrimeNG(1.0.0-beta.5)PanelMenuを使用しています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

beta7で試してみてください。新しいmenuitem APIにはrouterLinkプロパティが専用に用意されています。 –

答えて

0

プライムコミュニティにこのスレッドを参照してください。メニューからナビゲートすると、ページ全体がリフレッシュされます(ルータ出口エリアだけでなく)。

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

私は唯一のビューエリアをリフレッシュして、メニューを更新しないようにしたいです。これはまだベータ版の問題ですか?

+0

今のところ、この問題の回避策が見つかりました。 URLを使用する代わりに、コマンドを使用して角度router.navigate関数を記述する必要があります: {ラベル: 'Notes'、アイコン: 'fa-file-o'、コマンド:(クリック)=> {this.router.navigate (['Notes']);}}、 –

+0

Beta7は、routerLinkのようなmenuitem APIの専用のrouterLink属性を提供します:url:['Page1'] –