如何在angular2中将一个组件连接到另一个组件

Question

I have 2 different component, which is of different modules too. now i am saving data in one component, that saved data must be fetched to the other component. How can i fetch data from component to component, Please help.

First component:

saveSidebar() {
    let params = { userGuID: this.uID, MenuIds: this.selectedMenuIds.toString() }
    console.log(params);
    this._Service.addUserMenu(params).subscribe((res) => {
      if (res.Header.Success) {

      }
    })
  }

Here the saved data must go to menu component which is in different component

Answer 1

You can use a service which is imported in both components and its data shared. So then you can update the service from the first component, then create an event listener on the other component which listens to the changes of the service and updates the ui/data accordingly.

Answer 2

For parent-child communication you can use @input() @output(); For others, you can use services, register the service in parent module or root module, to learn more please visit below link. https://blog.nrwl.io/essential-angular-dependency-injection-a6b9dcca1761

Answer 3

If multiple modules are using the same variable data, then it is better create a service in the app-root level, modify and access its variables wherever required in your project, a sample code of service

    import { Injectable } from '@angular/core';        

      @Injectable({
      providedIn: 'root'
      })
      export class UserinfoService {
        public userName : string = 'username'
      }

making the service injectable in the root level is necessary in order to access it all over the project.

Answer 4

You can use subjects or behavioral subjects. As change in one component will automatically get reflected in other component using subjects.