Question

我正在使用AngurarJS 2创建一个应用程序，在那里我创建了一个父组件＆＃34; LayoutComponent＆＃34;使用@RouteConfig调用各种子组件。如下：

@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' },
])

我在LayoutComponent中使用布局模板作为模板。我在布局模板中放置了一个标记<router-outlet></router-outlet>，其中所有子组件都呈现其视图。现在我想要从子组件更新一些值到布局组件的视图（例如＆＃34; title＆＃34;）。当我们使用directives调用子组件时，我们可以在子组件中将对象作为inputs传递，当我们在子组件中对该对象进行任何更改时，更改将反映到父组件和相关视图的反映。

但是在使用@RouteConfig调用子组件时，我无法执行此操作。所以我在这方面需要帮助。

任何建议都将不胜感激。

我想告诉我，我试图通过使用共享服务对象来解决我的问题：

我创建了一个服务PageService并将其注入父组件。我在LayoutComponent的构造函数中传递它，并将其指定为组件的page属性。我用了这个＆＃34;页面＆＃34;组件模板中的属性显示值。

现在，当我更新服务对象的属性值时，我收到更改检测异常，停止进一步执行脚本：

异常：表达＆＃39; {{page.brdcrmb.title}} 在LayoutComponent @ 223：37＆＃39;在检查后发生了变化

Answer 1

路由器添加的组件不能参与与其父组件的声明性数据绑定。为此，通常使用共享服务在添加的组件和祖先组件之间共享数据。

有关详细信息，请参阅How do i share data between components in Angular2?。

在AngularJS 2中，当使用route-config调用child时，在父组件和子组件之间管理输入/输出属性的方法是什么

1 个答案: