导航到不使用按钮的不同html页面。

问题描述:

我想知道如何根据html/Angular 2中的值导航到不同的页面。如果值为true,那么将加载特定的页面。我已经有了使用routerLink导航到不同页面的按钮 - 我想复制该功能,但不使用按钮,页面会在特定值为真时加载。导航到不使用按钮的不同html页面。

这是我主要的应用程序的HTML页面:

<p-toolbar> 
    <div class="ui-toolbar-group-left"> 
     <button pButton type="button" label="Home" routerLink="/"></button> 
    </div> 

    <div class="ui-toolbar-group-right"> 
     <button pButton type="button" label="About" routerLink="/about"></button> 
     <button pButton type="button" label="Page1" routerLink="/page1"></button> 
     <button pButton type="button" label="Page2" routerLink="/page2"></button> 
     <i class="fa fa-bars"></i> 
    </div> 
</p-toolbar> 
<br /> 

<!--Implement page routing here...--> 
<div *ngIf="valueCheckComplete"> 
    <div *ngIf="showPage1"></div> 
    <div *ngIf="showPage2"></div> 
</div> 

在你能看到的价值检查中出现的底部。如果例如showPage1为真,我将如何加载页面?所有处理这些值的功能都已经在我的TypeScript文件中实现了,我只需要知道如何根据一个值导航到不同的页面,而不是点击按钮。

想通了。在我的html页面中,我没有路由到页面,而是在打字稿文件中使用了一个路由器对象。

constructor(private router: Router, ...){ 
    // set boolean here 
} 

goToPage() 
{ 
    if(this.showTuner) 
     this.router.navigate(['/tuner']); 
    else if(this.showProcessor) 
     this.router.navigate(['/processor']); 
}