In my Angular 6 app, there are certain pages that do not respond appropriately when I click "back". The site will instead spawn multiple components, instead of redirecting the user back to the single component they just went to.
For the faulty components, I made the component.html page be one single line like such as:
// home-page.component.html homeand
// admin-page.component.html adminAnd then the component.ts page is using default code as well.
On my app.component.html, I just have the following:
<router-outlet></router-outlet>Now when I go on the home page (via
<a routerLink="/admin">Admin></a>), I correctly see this (more or less)in my HTML when I inspect the site. And note this is just the RESULTING HTML that appears when I right click - view page source etc... I know my routing is setup correctly as this whole thing works in Google Chrome, but not in Firefox.
<html> <head>...</head> <body> <app-root> <router-outlet> <app-admin-page>admin</app-admin-page> </router-outlet> </app-root> </body> </html>But when I now press "back", I see the below
<html> <head>...</head> <body> <app-root> <router-outlet> <app-home-page>home</app-home-page> <app-admin-page>admin</app-admin-page> </router-outlet> </app-root> </body> </html>When I pressed "back", it should of DELETED the
<app-admin-page>admin</app-admin-page>and just kept the new<app-home-page>home</app-home-page>, but it keeps both. I can then press "forward" and then it'll have 3 components. Any ideas what is going on here? Note that if I'm on the 'admin' page and click the 'home' link (which does a routerLink thing), it works correctly. It's just the back button messing up.
最佳答案
您正在混合子组件和路由。对于任何特定组件，您应该使用其中之一。
<router-outlet></router-outlet> 之间不应定义任何组件标签。
上面代码中的注意事项:
<router-outlet>
<app-admin-page>admin</app-admin-page>
</router-outlet>
因此，要么将两个组件显示为子组件，如下所示:
<app-root>
<app-home-page>home</app-home-page>
<app-admin-page>admin</app-admin-page>
</app-root>
这将显示两个组件，一个在另一个之上。
或者
使用路由:
<app-root>
<router-outlet></router-outlet>
</app-root>
这将在此位置一次显示一个组件。使用路由配置来定义在路由器导出中显示哪些组件。
RouterModule.forRoot([
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'admin', component: AdminComponent }
]),
关于javascript - 返回按钮在同一页面上创建多个组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51793354/