title: Is there any way to attach a callback function to a route in an Angular routing module?
body: <p>I am building a large app on Angular that uses feature modules with child routes. Each child section is rendered through a section specific layout, which for the MVP sets the state for child pages. For example:</p>
  
  <p><code>/app/projects/yJEBuuOmmRv7WuVomGkb</code> will load the project <code>yJEBuuOmmRv7WuVomGkb</code> into the state container on any child routes.</p>
  
  <p>I've experimented with watching the router events, but have run into some challenging situations where the app is dealing with different routers in different contexts (child vs parent).</p>
  
  <p>I would like to do this in the route definition and was wondering if there is any way to attach a callback function to a route that can capture the route params and apply them to the state container.</p>
  
  <p>For example, something like this pseudocode:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const routes: Routes = [
    {
      path: '',
      component: PageLayoutComponent,
      children: [
        {
          path: '',
          component: PagesComponent
        },
        {
          path: 'admin/settings',
          component: PageSettingsComponent
        },
        {
          path: 'admin/publishing',
          component: PagePublishingComponent
        },
        {
          path: ':pageId',
          component: PageDetailLayoutComponent,
          
          // pseudo code!!!
          onRoute: (params =&gt; {
            StateContainer.set('page', params.pageId);
          }),
          
          children: [
            {
              path: '',
              component: PageComponent
            }
          ]
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class PagesRoutingModule { }</code></pre>
  </div>
  </div>
  </p>