Question

根据我对组件之间数据通信的理解，我们可以通过@input（），@ output（）并提供一项通用广播服务来实现它。

我认为，根据

等各种条件，服务是将其作为@input和@output的最佳方式

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

更好的做法是提供一个通用的通信服务，以便我们甚至可以在同一级别的组件（不是父子组件）和子父组件之间进行通信。

所以请您提出所有意见，我在这里还是其他更好的方式？

Answer 1

Akshay，您是对的。这实际上取决于情况。

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

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

Answer 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
        }
    });

Answer 3

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

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

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

如果组件将仅被一个父组件使用，则使用 ()Output 则不需要服务。

另外，当你有一个很深的嵌套对象并且想要检测变化时，避免使用@Input。

需要有关角度组件之间数据共享的专家意见

3 个答案: