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

Question

我在角度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获取数据。 现在，当您在组件1和组件2之间导航时，将不会再次触发解析器。 当父状态再次激活时，它们将再次被触发，这可能或可能不是您想要/需要的。

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。