Angular2路由：坚持路由选项卡和子路由

Angular Community！Angular2路由：坚持路由选项卡和子路由

我目前正在将AngularJS应用程序改写为Angular 2.我想解决可能被描述为的问题：路由选项卡+子路线。

所以，基本上路由器在Angular 2销毁不活动的组件（我的标签！）。问题是我不想要这种行为。原因是我有一些组件，如图表和数据网格，并希望在它们之间快速切换，我不想重新创建它们。

我已经找到了一些解决办法到坚持我的标签，同时具有路由，但使用这种方法，我不知道怎么实现子路由。我想也有一个深度无关的解决方案（意思是：更深层次地工作），因为我有更多的子标签需要被持久化。

解决方法是：我已经把一些空组件路线和实例标签自己躲在他们[hidden]属性：

app.ts：

@Component({ /*...*/ }) 
@RouteConfig([ 
    {path: '/**', redirectTo: ['Dashboard']}, 

    {path: '/dashboard', name: 'Dashboard', component: EmptyRoute}, 
    {path: '/products/...', name: 'Products', component: EmptyRoute}, 
    {path: '/sales', name: 'Sales', component: EmptyRoute}, 
    {path: '/reports', name: 'Reports', component: EmptyRoute}, 
]) 
export class App { 
    constructor(private router: Router) { 
    } 

    public isRouteActive(route) { 
     return this.router.isRouteActive(this.router.generate(route)) 
    } 
}

app.html：

<dashboard [hidden]="!isRouteActive(['/Dashboard'])"></dashboard> 
<products-management [hidden]="!isRouteActive(['/Products'])"></products-management> 
<sales [hidden]="!isRouteActive(['/Sales'])"></sales> 
<reports [hidden]="!isRouteActive(['/Reports'])"></reports>

来源

2016-01-21 Namek

如果有人有兴趣在一些局部的解决方案：https://github.com/ angular/angular/issues/6634 – Namek

我自己也有这个问题，并在这里找到了我自己的问题的答案：http：// stackoverflow。com/a/36100138/2972 – MartinHN

@MartinHN您是否测试过参数化层次结构？我的测试plnkr：http://plnkr.co/edit/MMy3azc4ksQOH6ezZIG5?p=preview - 点击产品1，然后点击产品2，然后点击产品1，底部的文本丢失。找不到解决方案，但路由器定义不应该管理组件的生命周期。 CanReuse不能像我们预期的那样工作。它只是比较相同类型的组件，可能在相同的路由级别上。我已经失去了一些时间调试Angular 2，我相信路由器需要重新设计 - 自定义Outlet不会这样做 - 或者对于层次结构不起作用的某些情况 – Namek

我知道您有两个不同的问题：

1 - 如何防止组件在离开时被破坏。 2-执行子路线。

1）目前Angular没有方便的方法来完成此操作。如果它们是一个叫做canDestroy（）的生命周期钩子，我们会对它进行补充。

无论如何，您可以使用非可路由选项卡来执行此操作，或者只将数据存储在不会被破坏的较高组件中。

2）对于孩子的路线我只是把2个例子：

练习1：普通孩子路由

const AdminRoutes: Routes = [ 
{ 
    path: '', 
    component: AdminComponent, 
    children: [ 
    { 
     path: 'users', 
     component: UsersComponent, 
     children: [ 
     { path: 'acces', component: AccesComponent, data: { preload: true} }, 
     { path: 'roles', component: RolesComponent, data: { preload: true} }, 
     { path: '', redirectTo: '/admin/users/acces', pathMatch: 'full' }, 
     { path: '**', redirectTo: '/admin/users/acces', pathMatch: 'full' }, 
     ], 
     data: { preload: true} 
    }, 
    { path: '', redirectTo: '/login', pathMatch: 'full' }, 
    { path: '**', redirectTo: '/login', pathMatch: 'full' } 
    ] 
},

EX2：当孩子航线属于另一个模块

代码高级模块

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent, data: { preload: true} }, 
    { 
    path: 'admin', 
    loadChildren: 'app/modules/admin/admin.module#AdminModule', 
    canActivate: [AuthGuardService], 
    data: { preload: true} 
    }, 
    { path: '', redirectTo: '/login', pathMatch: 'full' }, 
    { path: '**', redirectTo: '/login', pathMatch: 'full' }

代码子路由在自己的模块

const AdminRoutes: Routes = [ 
{ 
    path: '', 
    component: AdminComponent, 
    children: [ 
    { 
     path: 'users', 
     component: UsersComponent, 
     children: [ 
     { path: 'acces', component: AccesComponent, data: { preload: true} }, 
     { path: 'roles', component: RolesComponent, data: { preload: true} }, 
     { path: '', redirectTo: '/admin/users/acces', pathMatch: 'full' }, 
     { path: '**', redirectTo: '/admin/users/acces', pathMatch: 'full' }, 
     ], 
     data: { preload: true} 
    }, 
    { path: '', redirectTo: '/login', pathMatch: 'full' }, 
    { path: '**', redirectTo: '/login', pathMatch: 'full' } 
    ] 
},

来源

2017-06-28 10:14:59

Angular2路由：坚持路由选项卡和子路由

回答

相关问题