Javascript 如何手动注册到Angular中的内部组件事件？

在父组件中，我有以下代码：

  <div class="app">
      <counter [init]="myValue" (change)="myValueChange($event);"></counter>
    </div>

（单击时）会发出以下信息：

this.counterChange.emit（…）

问题：

---

在父组件中，如何通过代码而不是模板注册

（更改）

事件？

您应该通过将计数器子组件添加为

查看子组件来订阅子组件中的
主题

重要：正如@echonax所提到的，不应使用EventEmitter订阅，因为该类最终可能只供内部使用，并且不保证将来可以观察到，更多详细信息可在“”中找到

使用
主题
和
订阅
（未测试）的示例：

应用程序组件.ts：

import {Component, AfterViewInit, OnDestroy, ViewChild} from '@angular/core';
import {CounterComponent} from './counter.component';
import {Subscription} from 'rxjs/Subscription';

@Component({
    selector: 'my-app',
    template: `
    <div class="app">
        <counter [value]="myValue"></counter>
    </div>`
})
export class AppComponent implements AfterViewInit, OnDestroy {

    @ViewChild(CounterComponent) counter: CounterComponent;

    public myValue = 2;

    private counterSubscription: Subscription;

    ngAfterViewInit() {
        this.counterSubscription = this.counter.subject.subscribe(
            value => console.log('value', value)
        );
    }

    ngOnDestroy() {
        if (!!this.counterSubscription) {
            this.counterSubscription.unsubscribe();
        }
    }
}

import {Component, Input} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Component({
selector: 'counter',
template: `
    <div class="counter">
    <div class="counter__container">
        <button (click)="decrement();" class="counter__button">
        -
        </button>
        <input type="text" class="counter__input" [value]="value">
        <button (click)="increment();" class="counter__button">
        +
        </button>
    </div>
    </div>`
})
export class CounterComponent {

    @Input() value = 0;

    private _subject = new Subject<number>();

    public subject = _subject.asObservable();

    increment() {
        this.value++;
        this.subject.next(this.value);
    }

    decrement() {
        this.value--;
        this.subject.next(this.value);
    }
}

从'@angular/core'导入{Component，AfterViewInit，OnDestroy，ViewChild}；
从“./counter.component”导入{CounterComponent}；
从'rxjs/Subscription'导入{Subscription}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent实现AfterViewInit、OnDestroy{
@ViewChild（CounterComponent）计数器：CounterComponent；
公共myValue=2；
私人反认购：认购；
ngAfterViewInit（）{
this.counterSubscription=this.counter.subject.subscribe(
value=>console.log（'value'，value）
);
}
恩贡德斯特罗（）{
如果（！！本次反认购）{
此。反订阅。取消订阅（）；
}
}
}

计数器.组件.ts：

import {Component, AfterViewInit, OnDestroy, ViewChild} from '@angular/core';
import {CounterComponent} from './counter.component';
import {Subscription} from 'rxjs/Subscription';

@Component({
    selector: 'my-app',
    template: `
    <div class="app">
        <counter [value]="myValue"></counter>
    </div>`
})
export class AppComponent implements AfterViewInit, OnDestroy {

    @ViewChild(CounterComponent) counter: CounterComponent;

    public myValue = 2;

    private counterSubscription: Subscription;

    ngAfterViewInit() {
        this.counterSubscription = this.counter.subject.subscribe(
            value => console.log('value', value)
        );
    }

    ngOnDestroy() {
        if (!!this.counterSubscription) {
            this.counterSubscription.unsubscribe();
        }
    }
}

import {Component, Input} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Component({
selector: 'counter',
template: `
    <div class="counter">
    <div class="counter__container">
        <button (click)="decrement();" class="counter__button">
        -
        </button>
        <input type="text" class="counter__input" [value]="value">
        <button (click)="increment();" class="counter__button">
        +
        </button>
    </div>
    </div>`
})
export class CounterComponent {

    @Input() value = 0;

    private _subject = new Subject<number>();

    public subject = _subject.asObservable();

    increment() {
        this.value++;
        this.subject.next(this.value);
    }

    decrement() {
        this.value--;
        this.subject.next(this.value);
    }
}

从'@angular/core'导入{Component，Input}；
从'rxjs/Subject'导入{Subject}；
@组成部分({
选择器：'计数器'，
模板：`
-
+
`
})
出口级反元件{
@Input（）值=0；
private_subject=新主题（）；
public subject=_subject.asObservable（）；
增量（）{
这个.value++；
this.subject.next（this.value）；
}
减量{
这是价值观；
this.subject.next（this.value）；
}
}
您的挂钩命名错误。它们需要是
ngOnDestory
和
ngOnInit
实际上应该是
ngAfterViewInit
或者
计数器
变量将是
未定义的
。谢谢。你能不能添加一个提示，告诉OP他应该升级，他使用的是一年前的预发布版本。如果他不这样做，他将很难得到支持t@AluanHaddad很公平。我将删除plnkr-因为这个特定的问题可以不用代码来回答。@Royi我知道这个答案可以解决您的问题，但您不应该手动订阅
EventEmitter
。这是rxjs
主题的抽象，Angular不能保证
EventEmitter
将继续是一个可观察的
：。使用
主题
进行双向沟通：