PrimeNG PanelMenu routerLink问题

时间:2016-05-13 06:32:19

标签: angular primeng

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

以下是PrimeNG面板菜单的示例代码。当我点击ProjectWelcome链接时,它会刷新我的整个页面,然后加载相应的组件。

<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

5 个答案:

答案 0 :(得分:1)

答案 1 :(得分: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' }
        ];
    }

我只想刷新视图区域而不刷新菜单。这仍然是beta.6的问题吗?

答案 2 :(得分:0)

您可以通过多种方式使用它。

您首先设置面板菜单:

//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 => 用于在单击项目时调用函数。您可以阅读有关 here

    的更多信息

答案 3 :(得分:-1)

此外,请查看此处提供的解决方案-https://stackoverflow.com/a/39000508/9943363。它对我有用。

解决方案:确保将RouterLink用作数组,其字符串表示文件路径为-routerLink:['\ test \']

答案 4 :(得分:-1)

[multiple] =“ false”帮助

Uncaught TypeError: Cannot read property 'value' of null