在 angular 8 中设置动态路由

Question

I am facing some issue while setting up the routing in the angular 8. I am doing it like:

'company/:id/activity'
'company/:id/contacts'

did not get any params in activatedRoute:

this.activateRoute.params
            .subscribe(param => console.log(param) )

Is there any luck to fix that?

Main Routing file:

{
                path: 'company/:id',
                children: [
                    {
                        path: '',
                        loadChildren: () => import('@app/features/company-view/company-view.module').then(m => m.CompanyViewModule)
                    }
                ]
            }

Lazy loaded routing file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CompanyViewComponent } from '@app/features/company-view/company-view.component';
import { PendingChangesGuard } from '@app/shared/guards';
import { CompanyActivityComponent } from './company-activity/company-activity.component';

const routes: Routes = [
  {
    path: '',
    component: CompanyViewComponent,
    children: [
      { 
        path: '', 
        redirectTo: 'view'
      },
      {
        path: 'activity',
        component: CompanyActivityComponent,
        data: {
          title: "Company Activity"
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CompanyViewRoutingModule { }

if I use routing below then it works fine:

const routes: Routes = [
  {
    path: '',
    component: CompanyViewComponent,
    children: [
      {
        path: ':id/activity',
        component: CompanyActivityComponent,
        data: {
          title: "Company Activity"
        }
      },
      {
        path: '**',
        redirectTo: 'activity'
      }
    ]
  }
];

then how do I set the default routing to :id/activity ?

Answer 1

So. You want to pass variables for your component through the routing. In your routes.ts is oke like this path: 'company/:id/:activity' . Then you need to give it to your component. I'm using this: id = this.route.snapshot.params['id'] or activity = this.route.snapshot.params['activity'] . From here you can pass through for another component or whatever you want.

Ex:

<app-testcomponent
    [id]="id"
    [activity]="activity">
</app-testcomponent>

Answer 2

I'm not seeing a route for this: "view".

  { 
    path: '', 
    redirectTo: 'view'
  }

I changed it to "activity" and changed it to your catch all route for that section of the tree. I also refactored your routes a little bit, please look at both:

Main Route

{
    path: 'company',
    children: [
        {
            path: '',
            loadChildren: () => import('@app/features/company-view/company-view.module').then(m => m.CompanyViewModule)
        }
    ]
}

Child Routes

const routes: Routes = [
  {
    path: ':id',
    component: CompanyViewComponent,
    children: [
      {
        path: 'activity',
        component: CompanyActivityComponent,
        data: {
          title: "Company Activity"
        }
      },
      { 
        path: '**', 
        redirectTo: 'activity'
      }
    ]
  }
];

Answer 3

You are trying to get the parent parameter in the child component. Use the below:

this.activateRoute.parent.params.subscribe(params => {
    console.log(params["id"]);
});