Routing Angular2: schede di percorso persistenti e percorsi figlio

Comunità angolare!Routing Angular2: schede di percorso persistenti e percorsi figlio

Attualmente sto riscrivendo l'app AngularJS in Angular 2. Voglio risolvere un problema che potrebbe essere descritto come: tab di percorso + percorsi figlio.

Quindi, fondamentalmente Router in Angular 2 distrugge componenti inattivi (le mie schede!). Il problema è che non voglio questo comportamento. Il motivo è che ho alcuni componenti come i grafici e la griglia di dati e voglio passare rapidamente da uno all'altro, non voglio ricrearli.

ho trovato un po 'di soluzione a persistere le mie schede, pur avendo le rotte, ma con questo approccio non so come per attuare percorsi bambino. Mi piacerebbe anche avere una soluzione indipendente dalla profondità (ovvero: lavorare più livelli più in profondità) perché ho più sottoschede che devono essere persistenti.

La soluzione è: ho messo qualche componente vuota rotte e un'istanza linguette io li nascondono con [hidden] proprietà:

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>

fonte

2016-01-21 Namek

Se qualcuno sarebbe interessato a qualche soluzione parziale: https://github.com/ angolare/angolare/problemi/6634 – Namek

Ho avuto questo problema me stesso, e ho trovato la risposta alla mia domanda qui: http: // StackOverflow.com/a/36100138/2972 – MartinHN

@MartinHN lo hai testato per le gerarchie parametrizzate? Il mio plnkr di prova: http://plnkr.co/edit/MMy3azc4ksQOH6ezZIG5?p=preview - fai clic su Prodotto 1, quindi Prodotto 2, quindi Prodotto 1, manca il testo in fondo. Impossibile trovare la soluzione, ma il router non dovrebbe assolutamente gestire il ciclo di vita dei componenti. CanReuse non funziona come ci aspetteremmo. Confronta solo tra componenti dello stesso tipo, probabilmente sullo stesso livello del percorso. Ho perso un po 'di tempo con il debug di Angular 2 e credo che il router abbia bisogno di riprogettazione - l'Outlet personalizzato non funzionerà - o forse per alcuni casi in cui la gerarchia non svolge un ruolo – Namek

Capisco che hai due domande diverse:

1 - Come prevenire la distruzione del componente quando lo lasci. 2- implementazione dei percorsi figlio.

1) Per ora Angular non ha un modo conveniente per farlo. Lo apprezzeremmo se fossero un hook del ciclo di vita chiamato canDestroy().

In ogni caso è possibile eseguire questa operazione utilizzando schede non instradabili o semplicemente memorizzare i dati su un componente superiore che non viene distrutto.

2) Per gli itinerari bambino mi limiterò a mettere 2 esempi:

Ex1: bambino normale instradamento

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: Quando i percorsi figlio appartiene ad un altro modulo

Codice in materia di modulo superiore

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

codice per itinerari bambino nella loro proprio modulo

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

fonte

2017-06-28 10:14:59

Routing Angular2: schede di percorso persistenti e percorsi figlio

risposta

Problemi correlati