EventEmitters
used for @Output
‘s are just Observables with an emit method.
This means that you can just use Observable
instance instead, e.g. we can wire up FormControl value changes directly:
readonly checkbox = new FormControl();
@Output() readonly change = this.checkbox.valueChanges;
file:app.component.ts
import { Component, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'my-child',
template: `<input type=checkbox [formControl]="control">`
})
export class ChildComponent {
readonly control = new FormControl();
@Output() valueChange = this.control.valueChanges
}
@Component({
selector: 'my-app',
template: `
<h1>{{value}}</h1>
<my-child (valueChange)="value = $event"></my-child> `
})
export class AppComponent {
value = 'Check or uncheck';
}
file:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent, ChildComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [AppComponent, ChildComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
翻译自:https://www.30secondsofcode.org/angular/s/observables-as-outputs