无需按钮即可导航到不同的 html 页面。答案

【问题标题】：Navigate to different html page without a button.无需按钮即可导航到不同的 html 页面。
【发布时间】：2017-02-09 22:52:59
【问题描述】：

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

这是我的主应用程序 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 angular routing

【解决方案1】：

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

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

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

【讨论】：