angular2中多个组件之间的两种方式数据绑定？答案

【问题标题】：Two way data binding between multiple components in angular2?angular2中多个组件之间的两种方式数据绑定？
【发布时间】：2017-08-06 11:59:56
【问题描述】：

我有两个组件 HomePageComponent 和 StudentResultsComponent。我在 HomePageComponent 中有一个输入，当我输入时，我希望值在我的 StudentResultsComponent 输入中。

我想为输入创建一个单独的组件并在两个组件中调用它们，但是当我开始输入 HomePageComponent 时，我的 StudentsResultsComponent 中的值没有更新。这是我的代码：

Career-Search-Component.html

<input
  #input
  type        ="text"
  id          ="searchInput"
  class       ="input-student-search validate filter-input"
  placeholder ="Search by a career (Software Engineer,Web Developer,Geologist, Geogropher etc.)"
  [(ngModel)] ="query"
>

Career-Search.component.ts

import {Component,OnInit,Input,EventEmitter} from '@angular/core';
@Component({
  selector: 'career-search',
  templateUrl: 'career-search.component.html'
})
export class CareerSearchComponent implements OnInit {
  @Input() public query: string;
  constructor() {}

  ngOnInit() {}

}

HomePageComponent.component.html

<career-search></career-search>
<button class="submit" [routerLink]="['/students']">Search</button>

Students-result.component.html

&lt;career-search&gt;&lt;/career-search&gt;

我需要从主页组件传递数据的原因是因为我可以使用数据来查询它并根据从其他组件传递的值显示结果。

请帮忙。

谢谢

【问题讨论】：

那么这个职业搜索组件是什么？而且您没有显示任何模板..您在您的主组件中键入，也没有在您希望获得输入的学生结果组件中显示模板？以及这两个组件之间的关系是什么？相同级别的组件，或父子或什么？ :)
对不起，我误解了你。所以基本上我想要的是获取在HomePageComponent 中输入的输入值，然后使用 ngModel @AJT_82 将其传递给另一个名为 StudentResultsComponent 的组件内的输入
Ooookay...但是在 HomePageComponent 中键入的输入 的代码在哪里？模板（和 ts 代码）看起来如何？以及这些组件之间的关系是什么？这也是重要的信息。如果他们是父母和孩子，你可以使用Input() 如果他们不是父母和孩子，你需要使用共享服务:)
这是一个阅读组件如何相互通信的好页面angular.io/docs/ts/latest/cookbook/component-communication.html
哦，对不起。 HomePage 的 ts 中没有什么重要的东西可以展示。它们之间的关系只是两个不同的组成部分。他们不是孩子或什么不是。 @AJT_82

标签： angular typescript data-binding angular2-components angular2-inputs

【解决方案1】：

如果您的两个组件没有任何其他连接，我知道的唯一方法是使用服务。 AJT_82 提供的链接有一个示例，这是我能想到的最小示例：

import {Component, Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class InputService {

  public inputEvents: EventEmitter<string> = new EventEmitter();

  public inputChanged(val: string) {
    this.inputEvents.emit(val);
  }
}

@Component({
  selector: 'observer',
  template: `
    <p>Input value: {{ myValue }}</p>
`
})
export class ObserverComponent implements OnDestroy {

  private myValue: string;
  private subscription: Subscription;

  constructor(private service: InputService) {
    this.subscription = this.service.inputEvents.subscribe((newValue) => {
      this.myValue = newValue;
    })
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'observable',
  template: `
    <input [(ngModel)]="inputValue" />
`
})
export class ObservableComponent {

  private _inputValue: string;

  constructor(private service: InputService) {}

  public get inputValue(): string {
    return this._inputValue;
  }

  public set inputValue(val: string) {
    this._inputValue = val;
    this.service.inputChanged(val);
  }
}

@Component({
  selector: 'app-root',
  template: `

    <observable></observable>
    <observer></observer>

`
})
export class AppComponent {
}

解释：

Observable 组件通过双向数据绑定存储输入值。在 setter 中，我们不仅存储值，还告诉服务该值已更改。然后，该服务将发出一个观察者订阅的 inputChanged 事件。然后它可以随意使用该值。

【讨论】：

感谢您的解释和示例。这正是我想要的。