需要有关角度组件之间数据共享的专家意见[关闭]答案

【问题标题】：Need expert opinion on Data Sharing between components in angular [closed]需要有关角度组件之间数据共享的专家意见[关闭]
【发布时间】：2019-10-27 21:43:41
【问题描述】：

根据我对组件间数据通信的理解，我们可以通过@input()，@output()，做一个普通的广播服务来实现。

我相信服务是 @input 和 @output 的最佳方式，具体取决于各种条件，例如

文件夹结构应该像嵌套结构一样处于父子模式。
我们不能对正在处理的组件使用@output，因为我们永远找不到它的选择器。
我们也不能将@input & @output 用于非父/子组件。

最好是做一个通用的通信服务，这样我们甚至可以在同级组件（不是父子）和子父组件之间进行通信。

所以我需要你所有的意见，我在这里还是更好的方式？？

【问题讨论】：

我认为你应该在这里查看组件交互的文档：angular.io/guide/component-interaction。组件之间有几种通信方式，您选择哪种方式取决于您的要求。例如，如果您有一个在应用程序的不同部分重复的表单。对于这种情况，最好使用@Input、@Output，因为您可以通过@Input轻松地将任何数据从父组件（表单）传递给子组件（表单），并在提交表单时向父组件。
另外，文件夹结构不参与父子交互。当一个组件使用其中的另一个组件时，它成为父组件，因为它具有更广泛的范围，而子组件可能是该范围的一部分。因此，您可以根据需要在文件夹结构中使用组件，只需使用正确的导入语句将子组件导入父组件。

标签： angular service angular7 conceptual angular7-router

【解决方案1】：

阿克谢，你是对的。这实际上取决于情况。

当父子关系使用@Input 和@Output 装饰器是不错的选择。
当您有一个深层嵌套对象并且还想检测更改时，请避免使用@Input。 Angular 不会使用带有深层嵌套对象的 @Input 装饰器来检测更改。在这种情况下，服务是最好的。
当你想操作数据时，你可以使用服务。以便另一个组件以它想要的方式获取数据。
您还可以使用 Redux 的概念，使用 NGRX 存储在应用程序的任何位置共享。
另一种方法是使用@ViewChild 装饰器。

通过练习，您将了解在哪里使用哪种方法。

【讨论】：

【解决方案2】：

如果两个组件之间没有关系（父子或子父），则您不能在两个组件之间使用@input 或@output 共享数据。对于这种情况，您可以使用公共服务，调用公共服务的函数，在此函数“$next”中使用服务变量，在您要使用的第二个组件中，只需编写该公共服务变量的“$subscribe”即可。

// calling common service method and pass data to used by component 2 from component 1
this.commonService.method(data);

// common service variable
private variable1 = new Subject<any>();
variable1$ = this.variable1.asObservable();

// common service method
method(data: any) {
    this.variable1.next(data);
}



// passing and calling itself in component 2
 this.commonService.variable1$.subscribe(data => {
        if (data) {
           // use data send from component 1
        }
    });

【讨论】：

【解决方案3】：

您应该考虑的条件：组件是否可重用？

我的建议是，在您确定可重用组件之前，不要开始实施您的应用程序。

在过程或识别中，想想组件将如何被使用？如果跟踪通信切换到服务变得复杂，则从 () 输出开始。

如果组件只被一个父组件使用，则使用 () 输出，则不需要服务。

此外，当您有深层嵌套对象并且还想检测更改时，请避免使用@Input。

【讨论】：