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

我想在两个组件之间传递数据但我的问题是:

我有两个组件,假设一个是'main',另一个是'modal-dialog' .

在我的主要部分,我想打开模态对话框并从我的模态对话框中获取数据而不离开我的主要组件

我知道如何使用@Input但我看不到在我的应用程序中使用它的方法

例如在我的main.html中,如果我想将数据从main传递给模态,我会使用

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

但我想做反过来

这样的事情

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

模态对话框将为我的main发送一条消息,例如,如果我关闭它或单击某个按钮 .

回答(3)

2 years ago

看看@Output

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

在ModalDialogComponent中

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

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

在MainComponent中你需要有

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

2 years ago

有关组件之间的各种通信,请参阅this链接 .

2 years ago

我建议最好的方法是使用rxjs主题 . 您可以在模态对话框组件或其他任何组件之间传递数据 . 像这样在你的服务中创建新的rxjs主题

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

    myNewSubject = new Subject<any>();

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

}

当组件发生更改或想要将数据传递到另一个组件时,只需从组件中调用此服务函数,并将数据作为参数传递给此函数 . 你可以用这样的东西做到这一点

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() {

  }

}

现在您需要做的就是在另一个组件中订阅该数据 . 重要主题会随时监视对其的任何更改,数据将是连续流,并将自动订阅 . 因此,最好在构造函数中订阅主题,并且更改将立即反映在该组件中 .

你用这样的东西做到这一点

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);
       }) 
}

这样,您可以轻松地在任何组件之间传递数据 .