2015-12-31 13 views
6

Sto costruendo un'applicazione a singola pagina usando angular2 e ha bisogno di rendere un modello di applicazione diverso dipendente dal routing dell'app. Al livello più alto dovrebbe essere in grado di passare tra il modello di applicazioni principale e il modello di amministrazione dell'app.Come ottenere l'instradamento componente nidificato angular2 senza la barra aggiuntiva nel percorso url

regole di rotta:

  • Se il percorso URL inizia con/auth allora è manipolato dalla AuthApp
  • Se inizia con qualsiasi altra cosa allora dovrebbe essere gestita dal MainApp

Implementazione:

Per raggiungere questo s Ho un'app componente al più alto livello che delega la responsabilità a AuthApp o MainApp, come questa.

@RouteConfig([ 
    { 
    path: '/auth/...', 
    component: AuthApp, 
    as: 'Auth' 
    }, 
    { 
    path: '/...', 
    component: MainApp, 
    as: 'Main' 
    } 
]) 

Poi ogni sub-app (ad esempio AuthApp, MainApp) ha il proprio definizioni di percorso come questo.

@RouteConfig([ 
    { path: '/current-vacancies', CurrentVacancies, as: 'CurrentVacancies', useAsDefault: true }, 
    { path: '/candidates/create', CandidateCreate, as: 'CandidateCreate'}, 
    ... 
]) 

Funzionalmente e dal punto di vista del design questo funziona benissimo!

Problema:

Nell'applicazione principale, dove percorso di configurazione dell'applicazione non specifica un percorso (ad esempio /... => MainApp) Non voglio un percorso URL nidificato. Ad esempio, se si naviga tramite l'app (routerLink) su CurrentVacancies, l'URL viene aggiornato e viene anteposta una barra in più indesiderata. Il percorso dell'URL ora si legge in questo modo .../#//current-vacancies quando voglio leggere .../#/current-vacancies.

L'instradamento dell'applicazione funziona correttamente quando si digita .../#/current-vacancies nella barra degli indirizzi e si transiziona correttamente. Tuttavia, la navigazione tramite la direttiva routerLink delle applicazioni antepone l'aggiunta di barre in avanti indesiderate.

Capisco logicamente perché questo sta accadendo, il componente root che delega a MainApp ha un percorso di '/' ed è concatenato insieme con i suoi componenti figlio per formare un percorso url completo. MA in questo caso non è auspicabile avere la barra aggiuntiva. Qualche idea su come posso rimuoverlo o in qualche modo sovrascrivere questo comportamento.

Btw, ho considerato di spostare il routing del componente MainApp al livello più alto e, sebbene questo risolva i problemi del percorso url che sto segnalando, non mi consente di cambiare i modelli al livello più alto.

In sintesi

please help me con, sia

  • come rimuovere gli indesiderati / sulle principali vie di app "preferred option", o
  • come il design all'applicazione di modelli di alto livello commutabili con instradamento dei componenti nidificati.

Grazie

+1

C'è una [richiesta pull] (https://github.com/angular/angular/pull/5724) per questo problema. –

+0

Questo è abbastanza buono per me, si spera che lo farà nella prossima versione beta. Felice di aspettare un po 'mentre apprezzo che questo è tutto piuttosto nuovo. –

risposta

2

questo è oggi lavorando (angolare 4) e sembra essere stata fissata prima angolare 2 finale è stato rilasciato.

Problemi correlati