Question

我在Angular 2路由器视图渲染中面临问题。任何帮助将不胜感激。

当前情景：

在从一个视图导航到另一个视图时，Angular 2路由器将新视图加载到前一个视图之上，而不会破坏先前的视图。

（代表不同页面的红线实际上可以看到3个视图相互叠加）。]

预期情景：

路由器应首先销毁第一个视图，然后加载下一个视图。

路由文件

export const ROUTES: Routes = [
    {
    path: '',
    component: ParentComponent,
    children: [
        {
            path: 'child1',         
            component: ChildComponent1
        },
        {
            path: 'child2',
            component: ChildComponent2
        },
        {
            path: 'child3/:id',
            component: ChildComponent3
        }
        ]
    },
    {
        path: 'SiblingComponent',
        component: SiblingComponent
    }
]

然后在我的App Module中，我按照以下方式导入这些路线。

App.module

 @NgModule({
  imports: [
    RouterModule.forRoot(ROUTES)
  ]
 })

顺便说一句。我使用的是"@angular/router": "^4.0.0"，应用程序是使用angular-cli

构建的

此外，我不确定这是否是Angular 2路由器问题或其他一些问题是它的根本原因。的修改

以下是组件的HTML

App.component.html <router-outlet></router-outlet>

Parent.component.html <router-outlet></router-outlet>

Child1.component.html <div>Child 1</div>

Child2.component.html <div>Child 2</div>

Child3.component.html <div>Child 3</div>

Sibling.component.html <div>Sibling Component</div>

组件在破坏角度2路由器中的另一个之前获得负载

0 个答案: