将数据传输到一个组件到另一个 Angular 2答案

【问题标题】：Transfer data to one component to another Angular 2将数据传输到一个组件到另一个 Angular 2
【发布时间】：2018-03-28 21:38:22
【问题描述】：

我正在使用 Angular 2，我在应用程序中有 2 个不同的组件。

我正在尝试将数据从一个组件传输到另一个组件，但我无法使用输入和输出参数传输数据。

我正在使用以下代码传输数据。

@Output()
previousurl: EventEmitter<string> = new EventEmitter<string>();

transferdata()
{
    this.previousurl.emit("Hello");
}

上面是我用来发出数据的代码。

@Input() previousurl: string;

以上代码用于接收数据。

如果我做错了请纠正。

谢谢。

【问题讨论】：

你如何使用这些输入和输出，可以添加示例代码吗？
@AnshumanJaiswal 我已经实现了如上所述的代码。在输入参数中，我没有获取从输出参数发出的值。您能否建议我将如何接收数据。
据我所知，如果你的元素组件是嵌套的，你可以通过声明输入变量直接传递它，但如果组件是同级的，那么你也必须使用输出。
我有 2 个不同的组件，不像父母和孩子。这可以传输数据吗？ @ShubhamAgarwalBhewanewala
你应该使用服务。

标签： angular angular2-forms

【解决方案1】：

如 cmets 中所述，您需要使用类似这样的服务：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class PreviousUrlService {

  previousUrl: Observable<string>;

  private previousUrlSubject: Subject<string>=new Subject();
  constructor() {
    this.previousUrl = this.previousUrlSubject.asObservable();
  }

  updatePreviousUrl(prevUrl: string) {
    this.previousUrlSubject.next(prevUrl);
  }

}

并且组件需要与服务一起注入。

export class ComponentAComponent implements OnInit {

  previousUrl:string;
  constructor(private previousUrlService: PreviousUrlService) {

  }

  ngOnInit() {
    this.previousUrlService.previousUrl.subscribe((data) => {
      this.previousUrl=data;
      console.log('>> previous url', this.previousUrl);
    });
  }

}

然后组件 B 可以更改值并在组件 A 订阅函数中触发

export class CompBComponent implements OnInit {

  constructor(private previousUrlService: PreviousUrlService) {
  }

  ngOnInit() {

  }

  onUpdateUrl(prevUrl: string){
    this.previousUrlService.updatePreviousUrl('http://google.com');
  }

}

这是对不同类型主题的总体思路实验，以满足您的需求。

【讨论】：

是的，我也在使用服务传输数据，我想知道是否可以使用输入和输出参数。
如果这两个组件不是父子组件，那么使用输入和输出就不是一个好主意。如果它们是兄弟姐妹（同一父级的直接后代），解决方法是在两个组件上使用输入和输出。为两个事件发射器（输出）订阅父级，当事件被触发时，它可以将更改传播到子级的输入。但我真的不推荐这样做，因为它耦合非常紧密。