Angular routing between views

问题

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.

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?

回答1:

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.

回答2:

Having the router from import {Router} from '@angular/router';, you can do this to redirect to another page router.navigateByUrl('/forgot-password');. It will then load the forgot password page.

来源：https://stackoverflow.com/questions/54310495/angular-routing-between-views