Angular 4訪問其他組件數據

Question

我目前正在學習Angular 4，但是我想知道是否可以從另一個* .component.ts ..中從* .component.ts訪問一個組件的數據。我是什么意思？ 我有以下結構

app
  first-component
    first-component.html
    first-component.ts

  second-component
    second-component.html
    second-component.ts

  app(main)-component

因此，例如，如果我在first-component中具有以下字符串數組：

 labels: any[] = ['Name' , 'Address' , 'Photo' , 'Date' , 'Session' , 'Description'];

有沒有一種方法可以從我的second-component.ts訪問該數組，並在我的first-component.ts聲明標簽數組時做類似的事情？

第二成分=>

  pushItemsToArray() {
    this.labels.push(item);
  } 

因此，如果我在第二個組件中有一個表單，並且想要在第一個組件中呈現數據，那怎么辦？ 謝謝，很抱歉，如果這個問題重復另一個問題，但是我已經花了很多時間，找不到我想要的東西。

Answer 1

聽起來像是一項服務工作！ 對於您的示例，您可以實現label-service.ts類的東西。 然后，您可以將LabelService注入第一個組件和第二個組件。

為此，您需要在服務類上使用可注入裝飾器，並將LabelService類添加到模塊提供程序數組。

在標簽服務中，您將擁有一系列標簽和一些方法來幫助維護它們（添加，刪除，所需的任何內容）。

@Injectable()
export class LabelService {
   labels: any[] = ['Name' , 'Address' , 'Photo' , 'Date' , 'Session' , 'Description'];

   addLabel(label): void {
      this.labels.push(label);
   }
}

如果您正在使用模板中的數據，這將起作用，因為更改檢測將注意到所有更改。 如果您要執行更復雜的操作，而不能依靠更改檢測，則可能最終需要使用Rxjs主題，角度2輸入和輸出裝飾器或ngOnChanges生命周期掛鈎。 （如果需要，我可以在特定主題上提供更多示例，jsut問）

Answer 2

我發現使用BehaviorSubjects的最佳方法是創建一個消息服務來簡化此過程。 本文很好地解釋了共享數據的4種方法

我已經在此處發布了此類服務的示例代碼