2017-02-07 42 views
8

Próbuję uruchomić modal w mojej aplikacji poprzez routing. Wydaje się, że wszystko działa, z wyjątkiem tego, że do adresu URL dodano dodatkowy ukośnik, który uniemożliwia jego rozwiązanie. Adres URL powinien wyglądać następująco (i to działa, jeśli I wpisać go ręcznie) ...Kierowanie określonego gniazdka przez routerLink dodaje dodatkowe "/"

/accounts(modal:accounts/1/edit) 

ale jestem coraz to zamiast (zauważ ukośnik pomiędzy url bazowej i wylotowej docelowy) ...

/accounts/(modal:accounts/1/edit) 

znacznik baza jest ustawiona ...

<head> 
    <meta charset="utf-8"> 
    <title>myApp</title> 
    <base href="/"> 
    ... 
</head> 

Oto mój routingu config (rachunki-routing.module.ts)

const ACCOUNT_ROUTES: Routes = [ 
    { 
    path: 'accounts', 
    component: AccountsIndexComponent 
    },{ 
    path: 'accounts/new', 
    component: AccountsNewComponent 
    },{ 
    path: 'accounts/:id', 
    component: AccountsShowComponent 
    },{ 
    path: 'accounts/:id/edit', 
    component: AccountsEditComponent, 
    outlet: 'modal' 
    } 
]; 

i wylot (app.component.html)

<router-outlet></router-outlet> 
<router-outlet name="modal"></router-outlet> 

a link ...

<a [routerLink]="[{ outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a> 

Czego mi brakuje? Projekt został utworzony przy użyciu następujących sterowników: [email protected] i [email protected] i [email protected].

FWIW, oto zrzut ekranu z bali ...

failed routing attempt

+0

Czy dodałeś '' do pliku 'index.html'? – unitario

+0

tak, istnieje znacznik '' – Brian

+0

Jako pierwszy element potomny '' '-tag? Myślę, że twój problem może dotyczyć sposobu, w jaki ścieżki relacji są rozwiązywane. – unitario

Odpowiedz

17

Rozwiązaniem było określenie pustą ścieżkę względną na link. Dzięki @unitario za skierowanie mnie we właściwym kierunku!

<a [routerLink]="['', { outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a> 
+0

In our application we have an authentication modal that can open over any view so any initial path caused issues, either by loosing the current route or by adding extra slash. This solved the issue, Thank you! the only thing added is queryParamsHandling="merge" to facilitate passing parameters to the modal and the underlying view '' – Greg

Powiązane problemy