Question

我在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。有什么方法可以在这两个组件之间共享数据，而不必再次调用后端服务？

Answer 1

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

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

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

Answer 2

是的，最好的方法也是最专业的方法是使用全球存储解决方案，例如ngrx。

ngrx是行业标准，用于存储应用程序的全局数据。

它使缓存数据真正容易。我推荐有关Udemy的教程，但它们不是免费的。

或者，如果您只是想快速完成牛仔工作，则可以使用服务并将HTTP响应缓存在服务中，如下所示：

private res: any

public getMyData() {
  return (this.res) ? of(this.res) : this.http.get('/api/some/path')
    .pipe(res => {
      this.res=res
    })
}

并像通常那样订阅呼叫代码：

this.myService.getMyData().subscribe(res => {
  console.log('res', res)
})

您可以调整getMyData()并将其传递一个布尔值，布尔值将指示缓存的响应是否足够或是否再次发出HTTP请求。但是，我没有添加此逻辑，因为我想让事情变得简单。

PS您需要在根模块中提供服务，甚至更好的方法是使用以下命令注入服务：

@Injectable({providedIn: 'root'})

我相信此语法需要Angular 6。

如何以角度2将数据从一个组件传递到另一组件？

2 个答案: