如何使用Angular 2导航到新页面？

Question

按照正常的路由过程，通过制作不同的组件，在单击“提交”按钮后，下一个组件的内容将显示在按钮本身旁边（如提交按钮下方）

但是我想在点击“提交”按钮后完全转到另一个页面，如下图所示。

单击左侧页面上的“提交”按钮，我想转到一个显示Hello Member的新页面

以下是我正在做的事情，因此子组件（即Hello Member）的内容将在下面附加。

k

但这不是我想要的。

单击“提交”按钮后，我希望将其定向到一个全新的页面，其中应显示Hello Member，正如我在第二张图片中所示。

我该怎么做呢？

Answer 1

您需要以不同方式分离您的组件。

<router-outlet>定义了 路由组件的位置。因此，您的代码（如编写的）将路由到您告诉它的位置。

您需要将<router-outlet>添加到更高级别的组件。然后首先将您的第一个组件路由到该路由器插座。当用户单击“提交”时，将新组件路由到该路由器插座。

例如：

<强> app.component.html

<router-outlet></router-outlet>

<强> page1.component.html

<button mat-raised-button color="primary" 
        id="button" type="submit" 
        routerLink="/page2" routerLinkActive="active">
   Submit
</button>

<强> page2.component.html

<h2>Hello Member</h2>

我在这里有一个完整的路由示例：

https://github.com/DeborahK/MovieHunter-routing

Answer 2

在角度，您可以使用名为Route的东西。

最简单的方法是英雄之旅 https://stackblitz.com/edit/angular-tour-of-heroes-example

查看以下文件：app-routing-module，app-module和html（路由器插座应用程序）和params用法的英雄详细信息。

在您的情况下，您可以使用路由器插座，使用带有（点击）事件的按钮，并使用<a *ngIf="formOk" [routerLink]="/link">Link text</a>

等内容重定向您的用户