0

我是新的 Angular 2 开发。我添加了一个组件，在这个组件内我还有一些其他的子组件。我的文件夹结构如下：

parentComponent
    -child1Component
    -child2Component
    -child3Component

在parentComponent.html我添加<router-outlet></router-outlet>

我有从 child1 到 child 2 和 child 2 到 child3 的导航。我也可以向后移动，反之亦然。搬回来我正在使用 this._location.back();.

当我使用后退按钮向后移动时。它显示当前路线中的上一页组件。

例如 ：

当我使用后退按钮从 child2 移动到 child1 时。child1 路线仍在 child1 页面中显示子 html 部分。

对于路由，我使用的是这样的：

{ path: "parent", component: parentComponent,
  children: [ 
    { path: "child1", component: child1Component },
    { path: "child2", component: child2Component },
    { path: "child3", component: child3Component}
  ],
     data: { breadcrumb: 'Parent' }
}

我不知道为什么会这样。请帮忙！！

版本信息

@angular/cli: 1.2.6
node: 6.10.0
os: win32 x64
@angular/animations: 4.3.2
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/core: 4.3.2
@angular/forms: 4.3.2
@angular/http: 4.3.2
@angular/platform-browser: 4.3.2
@angular/platform-browser-dynamic: 4.3.2
@angular/router: 4.3.2
@angular/cli: 1.2.6
@angular/compiler-cli: 4.3.2
@angular/language-service: 4.3.2
4

1 回答 1

0

它适用于下面。

在 Index.html 页面和 ParentComponent 的 html 页面中添加 router-outlet。

--routes.ts

 {
    path:'',
    redirectTo:'index.html',
    pathMatch:'full'
},
{
    path:'parent',
    component:ParentComponent,
    children:[
        {
            path:"child1",
            component:Child1Component
        },
        {
            path:"child2",
            component:Child2Component
        },
        {
            path:"child3",
            component:Child3Component
        }
    ]

}

--parent.component.html

 <input type="button" (click)="goNext()" value="Next">  <router-outlet></router-outlet>

--parent.component.ts

  goNext()
  {
    this.router.navigateByUrl("/parent/child1")
  }

child1.html

  <input type="button" (click)="goNext()" value="Next"><input type="button" (click)="goBack()" value="Back" />

孩子1.ts

    goNext()
  {
    this.router.navigateByUrl("/parent/child2")
  }

child2.html

 <input type="button" (click)="goNext()" value="Next"><input type="button" (click)="goBack()" value="Back" />

child2.ts

    goNext()
  {
    this.router.navigateByUrl("/parent/child3")
  }

child3.html

 <input type="button" (click)="goBack()" value="Back" />
于 2017-08-03T15:55:29.123 回答