PrimeNG PanelMenu routerLink 问题

Question

我正在使用 PrimeNG (1.0.0-beta.5) PanelMenu 和 Angular RC 2.0.0-rc.1 版本

以下是 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 面板菜单实现中缺少什么吗？

干杯圣基特

Answer 1

您有多种使用它的方法。

首先设置面板菜单：

//HTML
<p-panelMenu [model]="items"></p-panelMenu>

然后在你的.ts文件中：

items: MenuItem[] = [];

ngOnInit() {
    this.items = [
        {
            label: 'Users',
            url:"/users" //<<<-------- This will reload the page and go /users
        },
        {
            label: 'Profile',
            routerLink:"/profile" //<<<-------- This works the same way as <a routerLink="/profile">Profile</a>
        },
        {
            label: 'Command',
            command:(click)=>{this.router.navigate(['/command']);} //<<<-------- Will not reload the page
        }
    ]
}

以下是其工作原理的一些解释：

• url => 这是用于外部导航（外部链接），使用时会重新加载页面的原因；

• routerLink => 它的行为类似于 Angular routerLink

• command => 用于在单击该项目时调用函数。您可以在这里阅读更多相关内容