In AngularJS 2 what is way to manage input/output properties between parent and child component when calling child using route-config

Question

I am creating an application using AngurarJS 2, where I created a parent component "LayoutComponent" and various child components are called using @RouteConfig. As below:

@RouteConfig([
{ path: '/dashboard', component: DashboardComponent, name: 'Dashboard', useAsDefault:true, data:{page:this.page} },
{ path: '/projects', component: ProjectListComponent, name: 'Project.list' },
{ path: '/project/:id', component: ProjectDetailComponent, name: 'Project.detail' },
{ path: '/project/add', component: ProjectAddComponent, name: 'Project.add' },
// { path: '/login', component: UserLoginComponent, name: 'User.login' },
{ path: '/logout', component: UserLogoutComponent, name: 'User.logout' },
{ path: '/users', component: UserListComponent, name: 'User.list' },
{ path: '/user/profile', component: UserProfileComponent, name: 'User.profile' },
{ path: '/user/:id', component: UserDetailComponent, name: 'User.detail' },
{ path: '/calendar', component: CalendarMainComponent, name: 'Calendar.main' },
{ path: '/emails', component: EmailListComponent, name: 'Email.list' },
// { path: '/user/register', component: UserRegisterComponent, name: 'User.register' },
])

I am using a layout template in LayoutComponent as template. I placed a tag <router-outlet></router-outlet> in layout template where all child components render their views. Now I want to update some value from child component to layout component's view (e.g. "title"). When we call child components by using directives then we can pass objects as inputs in child components and when we make any change in that object within child component, the changes reflects to parent component and related view reflects.

But I am not able to do this when calling child component using @RouteConfig. So I need help in this regard.

Any suggestion would be appreciated.

I want to tell that I tried to solve my problem by using a shared service object as bellow:

I created a service PageService and injected it into parent component. I passed it in constructor of LayoutComponent and assign it as component's page property. I used this "page" property in component's template to show value.

Now when I am updating value of service object's properties, I am getting change detection exception which stops further execution of script:

EXCEPTION: Expression '{{page.brdcrmb.title}} in LayoutComponent@223:37' has changed after it was checked

here is router-outlet tag between inverted commas>> I placed a tag "" in layout — Ram Krishna, Mar 22 '16 at 07:53
Possible duplicate of [How to send a value from one component to another?](http://stackoverflow.com/questions/34803565/how-to-send-a-value-from-one-component-to-another) — Günter Zöchbauer, Mar 22 '16 at 07:56
I updated my answer. I had a typo that made it say quite the opposite of what I meant. — Günter Zöchbauer, Mar 27 '16 at 15:10

score 2 · Answer 1 · edited May 23 '17 at 12:09

2

Components added by the router can't take part in declarative data binding with their parent component. For this usually a shared service is used to share data between the added component and a ancestor component.

See How do i share data between components in Angular2? for more details.

edited May 23 '17 at 12:09

Community

1
1

answered Mar 22 '16 at 07:54

Günter Zöchbauer

623,577
216
2,003
1,567

In AngularJS 2 what is way to manage input/output properties between parent and child component when calling child using route-config

1 Answers1