如何在angular2中將對象從父組件傳遞到子組件？

Question

說我有3個Angular組件，第一個組件使用第二個和第三個組件作為指令。 他們應該共享相同的模型對象，該對象在第一個組件中初始化。 如何將該模型傳遞給第二和第三部分？ 我提到了這篇文章如何在Angular 2中將對象從一個組件傳遞到另一個組件？ 但是它正在使用輸入...我想知道所有可能的替代方案，以在各個子組件之間共享模型對象。有人請告訴我可以遵循的替代方案

Answer 1

將類型添加到First組件的提供程序列表中，並將其注入到First ，涉及的子代和孫代子構造函數的構造函數中。

@Component({
  ...
  providers: [SharedService]
})
export class First {
  constructor(private shared: SharedService);
  // also add this parameter to the other child and grand-child 
  // component and directives constructors and they will get
  // passed a shared instance.
}

不要將SharedService添加到任何這些子級或孫級providers否則他們將獲得一個新實例而不是共享實例。

如果將SharedService而不是父組件添加到bootstrap(AppComponent, [SharedService]) ，則整個應用程序將共享接縫SharedService實例，而不僅僅是選定的子樹。

Answer 2

在子級（而不是共享服務）上使用輸入屬性的一個優點是，角度更改檢測將自動將更改傳播到子級。 如果您使用不可變的對象，並且想要更改整個模型（到新的實例/引用），則此功能特別有用。

使用服務，您可以更改模型，但不能更改模型參考。

使用輸入屬性，您可以執行以下任一操作：更改模型和/或更改模型參考。

有關使用不可變數據進行建模的更多信息，請參見以下Savkin博客文章： http ://victorsavkin.com/post/133936129316/angular-immutability-and-encapsulation