Angular2路由：持久路由选项卡和子路由-Java 学习之路

角社区！

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

所以，基本上Angular 2中的Router会破坏非活动组件（我的标签！） . 问题是我不想要这种行为 . 原因是我有一些组件，如图表和数据网格，并希望快速切换它们，我不想重新创建它们 .

我找到了一些 workaround 来保持我的标签，同时有路线，但使用这种方法，我不知道 how 实施 child routes . 我还想要一个独立于深度的解决方案（意思是：更深层次地工作）因为我有更多需要持久化的子标签 .

解决方法是：我已经将一些空组件放到路由并实例化标签，我自己用 [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>

1 回答

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

1-如何在离开时防止组件损坏 . 2-实施儿童路线 .

1）现在Angular没有方便的方法来做到这一点 . 如果它们是一个名为canDestroy（）的生命周期钩子，我们会对它进行修改 .

无论如何，您可以使用不可路由的选项卡执行此操作，或者只将数据存储在不会被销毁的更高组件上 .

2）对于儿童路线，我只举两个例子：

Ex1：定期子路由

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' }
  ]
},

回复于 2024-05-10T21:03:33+08:00

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

1 回答

相关问题