Angular 2在两个组件之间传递数据 [英] Angular 2 pass data between two components

问题描述

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

我有两个组成部分，假设一个是主要"，另一个是模态对话".

在我的主目录中，我想打开模态对话框并从模态对话框中获取数据，而无需离开主要组件

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

例如在我的main.html中，如果我想将数据从main传递到模式，我会使用

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

但是我想做相反的事情

类似的东西

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

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

我建议最好的方法是使用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);
       }) 
}

通过这种方式，您可以轻松地在任何组件之间传递数据.

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.

解决方案

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.

这篇关于Angular 2在两个组件之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！