视图之间的角度路由 [英] Angular routing between views

问题描述

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

I have created a login page using Angular 7. I have created how the login page looks in the initial app.component.html file and I implemented the logic at app.component.ts file.

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

I also put a link "Forgot password". I put a router link redirecting to the forgot-password.component.html. The url changes correctly (from localhost:4200 to localhost:4200/forgot-password) but the forgot-password.component.html is drawn on top of the previous login page.

http://prntscr.com/malk00

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

How can I erase the login page and go to the forgot password page?

推荐答案

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

As suggested by @abhishek, build the login component as a separate component. Only put the router outlet in the app.component.html:

<router-outlet></router-outlet>

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

Then change your routing to this:

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

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

That way the login page will route to the router outlet. And when the user clicks on the forgot password link, the entire page is replaced with the forgot-password component.

这篇关于视图之间的角度路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！