Angular 如何在父组件和子组件之间实现双向数据流？（五）

我有一个简单的代码示例，在该示例中，我尝试将父组件数据发送到子组件，同时在数据更改时从子组件到父组件获取数据：

家长：

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  parentData:string = 'start value'

}
<app-child [childData]="parentData"></app-child>

@组件({
选择器：“应用程序父级”，
templateUrl:“./parent.component.html”，
样式URL:['./parent.component.css']
})
导出类ParentComponent{
parentData:string='start value'
}

儿童：

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childData: string;

}
<p>
    {{childData}}
    <br>
    <input [(ngModel)]="childData" type="text">
</p>

@组件({
选择器：“应用程序子项”，
templateUrl:“./child.component.html”，
样式URL:['./child.component.css']
})
导出类子组件{
@Input（）子数据：字符串；
}

{{childData}}

我需要为

childData

注释

@Output（）

，但它已经用

@Input（）

注释了。

---

如何绑定变量

childData

和

parentData

？

您可以轻松地将这两个变量用于childData，其工作方式与ngModel类似。 例如：

@Input（）
@输出（）
childData：字符串；

要以ngModel工作的相同方式启用双向数据绑定，您必须使用名称约定在子组件输入和输出中添加两个属性

output name==input name+Change

。 父组件可以将其数据绑定到子组件，并且对于子组件中的每个更改，父组件都将更新

父html：

    <app-child[(childData)]="parentData"></app-child>

子组件：

export class ChildComponent {

  @Input() childData: string;
  @Output() childDataChange = new EventEmitter<string>();

changeAction() {
this.childDataChange.emit("anything");
}
}

导出类子组件{
@Input（）子数据：字符串；
@Output（）childDataChange=neweventemitter（）；
changeAction（）{
this.childDataChange.emit（“任何东西”）；
}
}

输出元素不必与输入元素同名。输出变量应该是发射器，以便将数据返回到绑定到模型。请参阅下面的代码片段：

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

@Component({
  selector: 'app-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)"  [disabled]="voted">Agree</button>
    <button (click)="vote(false)" [disabled]="voted">Disagree</button>
  `
})
export class VoterComponent {
  @Input()  name: string;
  @Output() onVoted = new EventEmitter<boolean>();
  voted = false;

  vote(agreed: boolean) {
    this.onVoted.emit(agreed);
    this.voted = true;
  }
}

从'@angular/core'导入{Component，EventEmitter，Input，Output}；
@组成部分({
选择器：“应用程序投票者”，
模板：`
{{name}}
同意
不同意
`
})
导出类VoterComponent{
@Input（）名称：string；
@Output（）onVoted=neweventemitter（）；
投票=错误；
表决（同意：布尔值）{
此.onVoted.emit（已同意）；
这是真的；
}
}

有关完整指南，请参阅以下链接：

---

我喜欢创建一个父母和孩子都可以订阅和设置的服务

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

@Injectable()
export class ShareDataService {

  private subjectSharedData: Subject<any> = new Subject<any>();
  getSharedData$ = this.subjectSharedData.asObservable();

  setSharedData(data: any): void {
    this.subjectSharedData.next(data);
  }

}

从'@angular/core'导入{Injectable}；
从'rxjs/Subject'导入{Subject}；
@可注射（）
导出类ShareDataService{
私有主题SharedData:Subject=新主题（）；
getSharedData$=this.subjectSharedData.asObservable（）；
设置共享数据（数据：任意）：无效{
this.subjectSharedData.next（数据）；
}
}

在需要将调用服务方法的数据传递给

setSharedData（data）

的点，无论数据是子数据还是父数据。在要检索的位置，使用

getSharedData$.subscribe（数据=>{console.log（数据）；}）

您需要在

app.module.ts

或任何模块中导入此服务。然后在父组件和子组件的

构造函数
方法中实例化它

如果您有任何问题，请告诉我。
如中所述：

要创建自己的支持双向绑定的组件，必须
定义一个@Output属性来匹配@Input，但在其后面加上后缀
改变

您可以在中看到代码的示例

子组件：

<input [(ngModel)]="childData" type="text" (ngModelChange)="onModelChange($event)">

<app-child [(childData)]="parentData"></app-child>



导出类AppChildComponent{
@Input（）子数据：字符串；
@Output（）childDataChange=neweventemitter（）；
onModelChange（值：字符串）{
this.childDataChange.emit（值）；
}
}

父组件：

<input [(ngModel)]="childData" type="text" (ngModelChange)="onModelChange($event)">

<app-child [(childData)]="parentData"></app-child>


您的意思是双向数据绑定？？？rxjs是一个功能强大的库，我很喜欢它，但在这种情况下您并不需要使用它。如果您不介意，我将写一条建议：将.share（）添加到您的observable中，这样父级和子级都可以侦听一个源，而不是创建两个it@Alexandr2134当然可以，请讲。如果他想扩大与其他组件的通信，此选项可以扩展。谢谢。但是在您的例子中，
childData
和
childDataChange
之间有多大的关联？从角度来看，这似乎是一种惯例，即当输出属性与输入属性具有相同的名称并添加了更改后缀时，该属性可以用于双向绑定。这一点也在本文中进行了解释。在上面的子组件代码中，每次修改
ngModel
时都会触发
ngModelChange
，新值作为
$event
参数。谢谢。但这在角度文档中的什么位置。。我也不明白为什么这会起作用。为什么----[（childData）]=“childData”--不够？这是双向装订的，对吧，那么这应该行了？谢谢。但这在角度文档中的什么位置。。我也不明白为什么这会起作用。为什么----[（childData）]=“parentData”-不够？这是双向绑定的，对吧，那么这应该行吗？