CODEWITHSUNDEEP
angularangular2-routing
M.N. Bug
M.N. Bug

Reputation: 253

<router-outlet> isn't substituted by component

i have built an angular2 Tabs-Component and i want to do routing due to the current selected tab.

This is my try:

@Routes([
    { path: '/:title', component: TabsComponent }
])
@Component({
    selector: 'customer-app',
    directives: [TabsComponent, Tab, ... ,ROUTER_DIRECTIVES],
    //providers: [TabsComponent],
    template: `
        <router-outlet>
            <tab title="Test 1">
                ...
            </tab>
            <tab title="Test 2">
                ...
            </tab>
        </router-outlet>
    `
})
export class CustomerComponent{}

When running this, i get the error

Error: Uncaught (in promise): EXCEPTION: Error in ./CustomerComponent class CustomerComponent - inline template:2:12 ORIGINAL EXCEPTION: No provider for TabsComponent!

So i added @Injectable() to TabsComponent and listet it in the providers property array (the commented line in the code).

NOW, this runs without any error, but isn't substituted by TabsComponent . (tabs are not shown, in the resulting html there is no <tabs></tabs> but still <router-outlet> <tab></tab> ... </router-outlet>)

How can i achieve that a TabsComponent is instantiated AND added as a Component in the resulting HTML ?

Upvotes: 2

Views: 195

Answers (1)

M.N. Bug
M.N. Bug

Reputation: 253

Now I see that I missunderstood routing at two points: 1) a child component needs a parent path 2) 's content children are just thrown away

Upvotes: 1

Related Questions