2

I have route configuration like this:

[
  {
    path: '',
    component: Home
  },
  {
    path: 'parent',
    children: [
      {
        path: '',
        component: ChildComponent1
      },
      {
        path: 'child2',
        component: ChildComponent2
      },
      {
        path: 'child3',
        component: ChildComponent3
      }
    ]
  }
]

I have some HTML (for example toolbar or menu) that i only want to show for components under parent route i.e. ChildComponent1, ChildComponent2, ChildComponent3, but not for HomeComponent.

I could include my toolbar in each of those components separately, but that is a lot of repetition if i have large number of those components. Is there a better way?

--------------- EDIT

In Angular 1, using ui-router the solution was pretty straightforward. I would have abstract 'parent' route (state), which in Angular 1 could have its own Controller and Template. Something like this:

{
    name: 'parent',
    config: {
        abstract: true,
        url: '/parent-route-url',
        title: 'Parent route',
        template: '<div class="this-is-my-toolbar"></div><div ui-view></div>'
    }
},
// all children of parent will now share common toolbar: <div class="this-is-my-toolbar"></div>
{
    name: 'parent.child1',
    config: {
        url: '',
        title: 'Child 1',
        template: 'This is child 1',
        controller: function() {}
    }
},
{
    name: 'parent.child2',
    config: {
        url: 'child2',
        title: 'Child 2',
        template: 'This is child 2',
        controller: function () { }
    }
}

In angular 2, abstract route (the one with children) cannot have its own Component with template (or can it?).

hendrix
  • 3,364
  • 8
  • 31
  • 46
  • You could add the components dynamically yourself similar to http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 but communicate the types by a shared service instead of an input. If you always want to show the same toolbar component, just set a flag in a shared service and make the parent component share/hide the toolbar depending on the flag. You can also use aux routes but they are reflected in the URL. – Günter Zöchbauer Sep 18 '16 at 20:14
  • Dynamically adding components is not something i like for simple use case like this. However, could you elaborate on aux routes? – hendrix Sep 18 '16 at 20:47
  • I also removed ParentComponent from my question as i found it confusing and unimportant for question purpose – hendrix Sep 18 '16 at 20:49
  • I haven't found docs. To me it seems the worst option for your use case. Why would you want to encode in the URL whether the toolbar is shown or not or which toolbar is shown. – Günter Zöchbauer Sep 19 '16 at 02:58
  • Yup i dont want that either. See, edits, for solution to this in angular 1 + ui-router – hendrix Sep 19 '16 at 12:37

0 Answers0