如何在angular2中将对象从父组件传递到子组件？

Question

Say i have 3 Angular components and first component uses the second and third component as a directive. They should share the same model object, which is initialized in the first component. How can I pass that model to the second and third component? I referred this post How to pass object from one component to another in Angular 2? but it is using inputs... I want to know all the possible alternatives to share the model object between various child components Somebody please tell me the alternatives which i can follow

Answer 1

Add the type to the providers list of the First component and inject it into the constructor of First , the involved child, and grandchild constuctors.

@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.
}

Don't add SharedService to any of those child or grand-childrens providers or they'll get a new instance instead of the shared instance.

If you add SharedService to bootstrap(AppComponent, [SharedService]) instead of the parent component, the whole application shares the seam SharedService instance instead of just a selected subtree.

Answer 2

An advantage of using input properties on the children (rather than a shared service) is that Angular change detection will automatically propagate changes to the children. This is especially useful if you are using immutable objects and you want to change your entire model (to a new instance/reference).

With a service, you can change the model, but not the model reference.

With input properties, you can do either: change the model and/or change the model reference.

See the following Savkin blog post for more about modeling using immutable data: http://victorsavkin.com/post/133936129316/angular-immutability-and-encapsulation