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

Question

按照正常的路由程序，通过制作不同的组件，单击提交按钮后，下一个组件的内容会出现在按钮本身的下面（就像提交按钮下面一样）

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

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

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

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

但这不是我想要的。

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

我该怎么做呢？

Answer 1

在 angular 中，您可以使用名为 Route 的东西。

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

查看此文件：app-routing-module、app-module 和 html（router-outlet 的应用程序）和参数使用的英雄详细信息。

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

之类的东西重定向你的用户

Answer 2

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

<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

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

How to navigate to a new page using Angular 2?

angular-routing

angular