Angular 视图之间的角度布线

我已经用Angular 7创建了一个登录页面。我已经在初始的

app.component.html

文件中创建了登录页面的外观，并在

app.component.ts

文件中实现了逻辑

我还放了一个链接“忘记密码”。我将路由器链接重定向到

忘记密码.component.html

。url正确更改（从

localhost:4200

更改为

localhost:4200/忘记密码

），但

忘记密码.component.html

绘制在上一个登录页面的顶部

---

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

让路由器从“@angular/router”导入{router}，您可以这样做以重定向到另一个页面

router.navigateByUrl（'/forget password'）。然后它将加载忘记密码页面。
按照@abhishek的建议，将登录组件构建为一个单独的组件。仅将路由器插座放在app.component.html中：

<router-outlet></router-outlet>

这样，登录页面将路由到路由器出口。当用户单击忘记密码链接时，整个页面将替换为忘记密码组件。
我认为最好的方法是创建
login
和
忘记密码
单独的组件。在appComponent中添加
。你能创建小的
https://stackblitz.com
解决您的问题。您可以在那里@Chellappan共享路由器配置代码吗？您的登录路径在哪里？
const routes: Routes = [
  { path: 'login', component: LoginComponent }
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'forgot-password', component: ForgotPasswordComponent }
];