CODEWITHSUNDEEP
angulartypescriptroutes
AVJT82
AVJT82

Reputation: 73357

Angular 2 child and parent (webpack, TS, Angular 2 final)

Been scratching my head since yesterday and can't figure out how to fix my problem. I have a parent: dashboard component, which includes a page header and dropdown lists. My child component contains of just one line at the moment: "Child Component! Chosen value from dropdown list: "Some value"". Please look at the pictures below.

The communication works fine, but I have trouble when navigating to dashboard.

My routes looks like this:

{
    path: 'admin',
    component: AdminComponent,
    children: [
        {
            path: '',
            component: AdminComponent,
        },
        {
            path: 'something/:name',
            component: TestComponent,
        },
    ]
},

In case I do not add:

        {
            path: '',
            component: AdminComponent,
        },

in the children route, I get error: 

Uncaught (in promise): Error: Cannot match any routes: 'admin'
Error: Cannot match any routes: 'admin'

But this also means, that when I have that added in children, the parent view is shown twice.

It's all fine when I choose an item from the drop down list, which triggers the child view, the view looks just like it should, parent view with drop down lists and the child text line.

I've tried to change the lines in children route:

    children: [
        {
            path: '',
            component: AdminComponent,
        },
        {
            path: 'something/:name',
            component: TestComponent,
        },
    ]

to: 

    children: [
        {
            path: '',
            redirectTo: 'admin',
        },
        {
            path: 'something/:name',
            component: TestComponent,
        },
    ]

But it doesn't work

Upvotes: 0

Views: 100

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71911

Change it to this:

 children: [
        {
            path: ''
        },
        {
            path: 'something/:name',
            component: TestComponent,
        },
 ]

This will just render nothing in your router-outlet on an empty path. Another option could be to redirect the empty path to something and have a placeholder component say: 'choose a disease'.

Upvotes: 1

Related Questions