feat(router): binding from router-outlet to child component

[btford]

For example:

@Component({ selector: 'foo-cmp' })
@View({
  template: `<router-outlet [prop-passed-to-child]="parentParams"></router-outlet>`,
  directives: ROUTER_DIRECTIVES
})
@RouteConfig([
  { path: '/', component: ChildCmp }
])
class ParentCmp {
  constructor(params: RouteParams) {
    this.parentParams = params;
  }
}

RouterOutlet should be able to pass the prop-passed-to-child binding to ChildCmp.

[PatrickJS]

👍

[jakubsta]

👍

[0x-r4bbit]

Perfect! As a current workaround, @cburgdorf and I introduced and are using "state" components. Those state components are just simply wrapper components that we navigate to and have the actual component that needs data through a binding as view child.

[btford]

I need help from someone more familiar with Angular Core– so @tbosch, @mhevery, @rkirov, or @vsavkin on how to approach this.

[mrydecki]

👍

[Antiavanti]

👍

[filipows]

👍

[cburgdorf]

I don't mean to ruin the party but since there may be several routes and therefore several completely different components behind <router-outlet> Each of those components would want to bind different properties. It may be that I'm getting it wrong but the way it stands now it seems to be only useful if all my routes take the same properties which is most likely not the case.

That is why we recently introduced the concept of state components for a demo app. This is what @PascalPrecht was referring to.

https://github.com/thoughtram/ng2-contacts-demo/blob/9fe0dcb838121294f48584592933db349a6b921c/app/components/contact-detail-state/contact-detail-state-component.ts

The reason we did that is so that we can build components that are kept free from routing concerns (e.g. <contact-list data="listOfContacts"></contact-list>).

[dimitrikochnev]

👍