Angular 2 Route changing in nested component

Question

I have a fairly simple Angular 2 problem. I have a main view with a toolbar at the top and a router outlet right below it.

mainView.ts

@Component({
    selector: 'pod-app',
    template: `
        <pod-toolbar></pod-toolbar>

        <router-outlet></router-outlet> <!-- USE THIS router-outlet -->
    `,
    directives: [ ToolbarComponent, RouteComponent, ROUTER_DIRECTIVES ],
    providers: [
        EventService,
        ROUTER_PROVIDERS
    ]
})

@RouteConfig([
    {
        path: '/list',
        name: 'ListView',
        component: ListViewComponent,
        useAsDefault: true
    },
    {
        path: '/tileView',
        name: 'TileView',
        component: TileViewComponent
    },
    {
        path: '/pdfView',
        name: "PdfView",
        component: PdfViewComponent
    }
])

export class MainComponent implements OnInit { 
    ...blah...blah...blah
 }

Then I have my toolbar.ts which nested inside it is my route navigation list

toolbar.ts

@Component({
    selector: 'pod-toolbar',
    template: `
        <div class="demo-toolbar">
            <p>
                <md-toolbar color="primary">

                    <pod-routes></pod-routes> <!-- appRoutes.ts component -->

                </md-toolbar>
            </p>

        </div>
    `,
    directives: [MdToolbar, MdButton,RouteComponent, ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

export class ToolbarComponent implements OnInit {
    ...blah...blah...blah
}

Then Here is the route links that get nested inside the toolbar that need to change the view underneath the toolbar in the mainView

appRoutes.ts

@Component({
    selector: 'pod-routes',
    template: 
    `
        <nav>
            <a [routerLink]="['/ListView']"><img src="pathto.png" height="45" width="45"></a>
            <a [routerLink]="['/TileView']"><img src="pathto.png" height="40" width="45" ></a>
            <a [routerLink]="['/PdfView']"><img src="pathto.png" height="40" width="45" ></a>
        </nav>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class RouteComponent{

}

So, what am I doing wrong? This is the way I would like it set up but if this just isn't feasable then maybe I could move the routes into the toolbar and if that isn't feasable then I could just move the entire toolbar into the mainView, which I don't want to do but if I have to then I will.

UPDATE

Removed ROUTER_PROVIDERS from appRoutes.ts, still having same issue.

UPDATE 2

Added '/' to url routes at suggestion of answer, same issue, url in address bar changes but ui underneath the toolbar doesn't

UPDATE 3

Removed providers: [ROUTER_PROVIDERS] from toolbar.ts and mainView.ts files and bootstrapped ROUTER_PROVIDERS in app.ts

bootstrap(MainComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy}) ] )
     .catch(err => console.error(err));

Seems to have done the trick. Many thanks to Gunter for sticking with me and helping me solve the issue. His Plunker really helped!

Do note that in the address bar the url changes correctly when I click the buttons just the ui doesn't change — Logan H
– Logan H, Commented Apr 25, 2016 at 15:24
I think you should remove the @RouteConfig() on RouteComponent or clarify which <router-outlet> should be used for the routes you navigate using the links in your question. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 25, 2016 at 16:01
I added a Plunker link to my answer. I simplified it a bit. I had the ROUTER_PROVIDERS in bootstrap() and left it there (removed from your code). Can you please try to reproduce your problem with this Plunker? I the Plunker you can't see the URL because it runs in an iframe but you see the view updating ;-) — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 25, 2016 at 16:10
I guess this is why I kept ROUTER_PROVIDERS in bootstrap() instead of moving it to the root component because the provider of LocationStrategy must come after ROUTER_PROVIDERS because it overrides the default PathLocationStrategy contained in ROUTER_PROVIDERS and for the purpose of overriding providers, order is significant. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 25, 2016 at 17:15

Günter Zöchbauer · Accepted Answer · 2016-04-25 16:09:45Z

1

update2

Plunker example

update

Prefix the route names with / to tell that the root router should navigate to this route:

<a [routerLink]="['/ListView']"><img src="pathto.png" height="45" width="45"></a>
<a [routerLink]="['/TileView']"><img src="pathto.png" height="40" width="45" ></a>
<a [routerLink]="['/PdfView']"><img src="pathto.png" height="40" width="45" ></a>

original

Don't provide ROUTER_PROVIDERS more than once

providers: [
    EventService,
    ROUTER_PROVIDERS
]

ROUTER_PROVIDERS should be provided exactly once at the root component and nowhere else (alternatively in boostrap(...))

edited Apr 25, 2016 at 16:09

answered Apr 25, 2016 at 15:21

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Logan H Over a year ago

Ok, gotcha, removed ROUTER_PROVIDERS from my appRoutes.ts. Still having same issue but fixed code issue. Thanks dude!

Günter Zöchbauer Over a year ago

I udpated my answer.

Logan H Over a year ago

thanks Gunter, I have reflected your changes in the question but I am still having the same issue, that the url in the address bar is changing correctly but the ui doesn't update, it stays on the same html partial from initial load.

Collectives™ on Stack Overflow

Angular 2 Route changing in nested component

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related