Question

我有一个过滤器组件：ExtendedSearch组件。我有一个列表组件，必须从extendedSearch组件获取结果。我有一个由ExtendedSearch呼叫使用的服务呼叫。

Answer 1

尝试参考这个答案（Angular 8: pass a data to a router），我已经回答了类似的问题。它有4种方法来处理此问题。

父级：通过Input()共享数据
孩子对父母：通过ViewChild共享数据
孩子到父母：通过Output()和EventEmitter共享数据
不相关的组件：与服务共享数据（推荐）

希望这会有所帮助！

祝你好运！

Answer 2

您可以使用@Input和@Output事件发射器通过不同的组件共享结果。在medium

中了解更多信息

通过服务，您可以像这样

Service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}


Parent.ts 
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}
sibling.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}

如何显示从一个组件发送到另一组件的结果？

2 个答案: