Question

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

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

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

Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[28/Mar/2018 01:41:01] "GET /login/ HTTP/1.1" 200 4887
[28/Mar/2018 01:41:02] "POST /login/ HTTP/1.1" 302 0
[28/Mar/2018 01:41:02] "GET / HTTP/1.1" 200 13006
[28/Mar/2018 01:41:02] "GET /soups/pull/ HTTP/1.1" 200 6478

以上代码我用来发出数据。

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

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

以上代码用于接收数据。

如果我做错了，请纠正。

感谢。

Answer 1

如评论中所述，您需要使用以下服务：

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

}

这是针对您需求的不同类型主题的一般想法实验。

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

1 个答案: