时间戳

首页 > 解决方案 > 如何将数据从一个组件传递到角度 2 中的另一个组件？

angular - 如何将数据从一个组件传递到角度 2 中的另一个组件？

问题描述

我在 Angular 2 应用程序中有两个组件（ComponentOne 和 ComponentTwo）。ComponentOne 需要用户详细信息和用户偏好来执行某些操作，因此我在初始化 ComponentOne 时从后端服务获取这些详细信息。

@Component({
    selector: 'componentOne',
    template: 'componentOneTemplate',
    styles: ['componentOneStyles'],
    providers: []
})
export class ComponentOneComponenet implements OnInit {
    //getting user details
    getUserDetails();

    //getting user preferences
    getUserPreferences();
}

我使用路由器从 ComponentOne 路由到 ComponentTwo。

<router-outlet></router-outlet>

现在我又想要 ComponentTwo 中的 userDetails 和 userPreferences。有没有办法在这两个组件之间共享数据而不是再次调用后端服务？

标签： angulartypescript

解决方案

您可以像其他人建议的那样简单地将数据缓存在服务中。

根据用例可能相关的另一个解决方案是解析父状态中的数据并从ActivatedRoute组件中获取数据。现在，当您在组件一和组件二之间导航时，解析器将不会再次被触发。当父状态再次激活时，它们将再次被触发，这可能是也可能不是您想要/需要的。

path: '',
resolve: [
   userDetails: UserDetailsResolver,
   userPreferences: UserPreferencesResolver
],
children: [{
   path: 'one',
   component: ComponentOne,
},{
   path: 'two',
   component: ComponentTwo,
}]

推荐阅读