Question

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

我有两个组成部分，假设一个是主要的＆＃39;和另一个模态对话框＃39;

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

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

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

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

但我想做反向

像这样的东西

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

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

Answer 1

查看@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"}
}

Answer 2

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

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

Answer 3

请参阅this链接，了解组件之间的各种通信。

两个组件

3 个答案: