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

Question

我正在使用 AngurarJS 2 创建一个应用程序，我在其中创建了一个父组件“LayoutComponent”，并使用 @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>在所有子组件呈现其 View 的布局模板中。现在我想将一些值从子组件更新到布局组件的 View (例如“标题”)。当我们使用 directives 调用子组件时然后我们可以将对象作为 inputs 传递在子组件中，当我们在子组件中对该对象进行任何更改时，这些更改会反射(reflect)到父组件和相关 View 中。

但是当使用 @RouteConfig 调用子组件时我无法做到这一点.所以我需要这方面的帮助。

如有任何建议，我们将不胜感激。

我想告诉大家，我试图通过使用共享服务对象来解决我的问题，如下所示:

我创建了一个服务 PageService并将其注入(inject)到父组件中。我在 LayoutComponent 的构造函数中传递了它并将其分配为组件的 page属性(property)。我在组件的模板中使用了这个“页面”属性来显示值。

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

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

Answer 1

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

参见 How do i share data between components in Angular2?了解更多详情。