gpt4 book ai didi

javascript - 返回按钮在同一页面上创建多个组件

转载 作者:行者123 更新时间:2023-12-03 01:20:25 25 4
gpt4 key购买 nike

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
home

and

// admin-page.component.html
admin

And 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com