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路由：堅持路由選項卡和子路由

回答

相關問題