Routing Angular2: trwanie kart trasa i ścieżki dla dzieci

Question

Angular Wspólnoty!

Aktualnie przepisuję aplikację AngularJS na Angular 2. Chcę rozwiązać problem, który można opisać jako: zakładki trasy i ścieżki podrzędne.

Więc, zasadniczo Router w Angular 2 niszczy nieaktywne komponenty (moje karty!). Problem polega na tym, że nie chcę tego zachowania. Powodem jest to, że mam kilka komponentów, takich jak wykresy i siatki danych, i chcę szybko się między nimi przełączać, nie chcę ich odtwarzać.

Znalazłem jakiś obejście utrzymują swoje występy podczas trasy ale mający zastosowanie tej metody nie wiem jak wdrożyć dróg podrzędnych. Chciałbym również mieć rozwiązanie niezależne od głębokości (co oznacza: praca na więcej poziomach głębiej), ponieważ mam więcej podzadań, które muszą być utrzymane.

Rozwiązaniem jest: Włożyłem trochę pusty składnik do tras i wystąpienia zaczepy sam je ukrywających się [hidden] nieruchomości:

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> 

Answer 1

Rozumiem, że masz dwa różne pytania:

1 - Jak zapobiec zniszczeniu komponentu, gdy go opuścisz. 2- wdrażanie tras podrzędnych.

1) Na razie Angular nie ma wygodnego sposobu na zrobienie tego. Mielibyśmy to docenić, gdyby byli hakiem cyklu życia zwanym canDestroy().

W każdym razie możesz to zrobić za pomocą kart nierekablowanych LUB po prostu przechowywać dane na wyższym składniku, który nie zostanie zniszczony.

2) W przypadku dróg podrzędnych ja po prostu umieścić 2 przykłady:

Ex1: regularny dziecko routingu

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: Podczas trasy dziecko należy do innego modułu

kodują wyższy moduł

`

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

`

Code dla dróg podrzędnych we własnym modułem

`

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

`