Angular 2 三分量数据传输

Question

我有 3 个 Angular 组件。
第一个是 app.component
第二个test1.component和
第三个test2.component

app.component.html

<app-test1 [(value)]="name" ></app-test1>
<button (click)="click()">Save</button>

test1.component.html

<app-test2 [(value)]="value"></app-test2>

test2.component.html

<input type="test" [(ngModel)]="value">

我想将测试 2.component 输入更改直接传输到 app.component 而不使用“输出”。 (this.name)

如果我使用“输出”，我将不得不使用额外的（实体更改），我不想那样。

✔ <input type="test" [(ngModel)]="value">
❌ <input type="test" [(ngModel)]="value" (entityChange)="value = $event">

样品供您试用：StackBlitz 我想不输出。

Answer 1

使用 rxjs Subject 属性创建服务并将其注入 app 和 test2

//服务中的属性

 inputUpdate = new Subject()

在测试2 // 在构造函数中注入服务

<input type="test" (change)="someService.inputUpdate.next($event)>

在应用程序中在构造函数中注入相同的服务 并订阅更新

this.someService.inputUpdate.subscribe( (value) => { //do smth  })