Angular 2 在两个组件之间传递数据

Question

I want to pass data between two components but my problem is:

I have two components, lets suppose one is 'main' and another 'modal-dialog'.

In my main I want to open the modal-dialog and get the data from my modal-dialog without leaving my main component

I know how to use @Input but I can't see a way to use that in my app

For example in my main.html, if I want to pass data from main to modal I would use

<modal-dialog [data]="data"> </modal-dialog>

But I want to do the inverse

Something like that

<modal-dialog /*get data from modal when event happens*/ > </modal-dialog> 

Modal-dialog will send a message for my main, for example, if I close it or click in some button.

Answer 1

Look to @Output

<modal-dialog [data]="data" (DialogEvent)="processEvent($event)"> </modal-dialog>

in ModalDialogComponent

@Output()
public DialogEvent = new EventEmitter();

public methodWhichTriggers(){
   this.DialogEvent.emit({id: 1, type: "anything you need"})
}

In MainComponent you will need to have

public processEvent($event){
   console.log($event); //will print {id: 1, type: "anything you need"}
}

Answer 2

I suggest that best approach is that to use rxjs subject. You can pass data between modal dialog component or whatever it is. Create new rxjs subject in your service like this

import { Subject } from 'rxjs/Subject';
@Injectable()
export class MyService {

    myNewSubject = new Subject<any>();

    informDataChanges(passyourobject){
      this.myNewSubject.next(passyourobject);
  }

}

When change happens in your component or you want to pass data to another component simply call this service function from your component and pass data as parameter to this function. You can do that with something like this

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-some',
      templateUrl: './some.component.html',
      styleUrls: ['./some.component.css']
    })
    export class SomeComponent implements OnInit {

      constructor( private myService: MyService) { }

      someFunction(){
        this.myService.informLogout('somedata');//Passing data to service here
      }

  ngOnInit() {

  }

}

Now all you need to do is subscribe to that data in another component. IMPORTANT subject keeps on watches any changes to it, and data will be continuous stream and it will be automatically subscribed. So it is best to subscribe to the subject in the constructor, and changes will be immediately reflected in that component.

You do it with some thing like this

import { Component, OnInit } from '@angular/core';

        @Component({
          selector: 'app-another',
          templateUrl: './another.component.html',
          styleUrls: ['./another.component.css']
        })
        export class AnotherComponent implements OnInit {

          constructor( private myService: MyService) {
            this.myService.myNewSubject.subscribe(data=>{
             console.log(data);
       }) 
}

This way you can pass data between any components easily.

Answer 3

有关组件之间的各种通信，请参阅此链接。