CODEWITHSUNDEEP
typescriptangularangular2-routing
Logan H
Logan H

Reputation: 3423

Angular 2 Route changing in nested component

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!

Upvotes: 2

Views: 1054

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658225

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(...))

Upvotes: 1

Related Questions