AJT_82 AJT_82 - 13 days ago 6
TypeScript Question

Angular 2 child and parent component (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: 'dashboard',
component: DashboardComponent,
children: [
{
path: '',
component: DashboardComponent,
},
{
path: 'something/:name',
component: TestComponent,
},
]
},


In case I do not add:

{
path: '',
component: DashboardComponent,
},


in the children route, I get error:

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


But this also means, that when I have that added in children, my view looks like below picture. So the parent view is shown twice.

enter image description here

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:
enter image description here

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

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


to:

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


But it gives me the same error as above:

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

Answer

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'.