在Angular 5中的兩組同級組件之間共享數據

Question

Angular的新手。 來自移動應用程序開發。

我知道有太多信息可以教教如何在同級組件之間共享數據。 但是我的問題是在2組同級組件之間共享數據。

因此從代碼角度來說，我有2個組件（A和B）。 單擊A中的按鈕時，B將更新。 但是在UI方面，有2套此AB組件。 因此，當單擊A1中的按鈕時，將更新B1。 單擊A2中的按鈕時，將更新B2。

我該如何實現？

我嘗試過的

首先，我使用了一項服務來共享數據。 但是隨后發現，單擊A1時，B1和B2均被更新，這是我不想要的。 單擊與A2相同。

Answer 1

使用服務在兩個同級組件之間共享數據絕對是最好的方式，這里唯一需要做的就是向組件添加密鑰。

<comp-a [key]="1"></comp-a>
<comp-b [key]="1"></comp-b>
<comp-a [key]="2"></comp-a>
<comp-b [key]="2"></comp-b>

如果組件是通過*ngFor生成的，則可以使用循環的索引，或者如果綁定一個對象，則可以使用對象ID。

無論如何，當comp-a調用服務時，您應該包括密鑰。 當comp-b正在偵聽的事件被觸發時，您應在該事件中包括該鍵，並且comp-b僅在匹配其自己的鍵時才對其做出響應。

Answer 2

我認為您在模塊級別提供了服務，這就是為什么您只有一個實例。

在組件級別提供服務。 創建一個同時包含A和B的包裝器組件，並在此組件級別提供服務。 每次創建包裝器組件時，都會創建一個新的服務實例，並且該實例僅對A和B可用。

@Component({
    selector: 'app-abwrapper',
    templateUrl: './abwrapper.component.html',
    styleUrls: ['./abwrapper.component.scss'],
    providers: [{
        MyServiceToShareData
    }]
})