视图之间的角度路由

Question

我已经使用Angular 7创建了登录页面。已经创建了登录页面在初始app.component.html文件中的外观，并在app.component.ts文件中实现了逻辑。

我还放置了一个链接“忘记密码”。我将路由器链接重定向到forgot-password.component.html。网址已正确更改（从localhost:4200到localhost:4200/forgot-password），但是forgot-password.component.html绘制在上一个登录页面的顶部。

http://prntscr.com/malk00

如何删除登录页面并转到忘记密码页面？

Answer 1

按照@abhishek的建议，将登录组件构建为一个单独的组件。只将路由器插座放在app.component.html中：

<router-outlet></router-outlet>

然后将您的路由更改为此：

const routes: Routes = [
  { path: 'login', component: LoginComponent }
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'forgot-password', component: ForgotPasswordComponent }
];

这样，登录页面将路由到路由器出口。当用户单击“忘记密码”链接时，整个页面将替换为“忘记密码”组件。

Answer 2

从import {Router} from '@angular/router';起拥有路由器，您可以执行此操作以重定向到另一个页面router.navigateByUrl('/forgot-password');。然后，它将加载“忘记密码”页面。