使用輸入/輸出事件觸發Angular 2中父組件的方法

Question

子服務如何向父組件通知更改？我曾經在$ 1角度做這個事情，$在子服務中觀察一個變量。不幸的是，這是不可能的。

我試着將服務注入到組件中，但是這個失敗了，可能是由於循環依賴關係。根據我可以當前文檔中找到，我想出了下面的代碼：

AppComponent 
| 
SomeComponent 
| 
SomeService 

AppComponent

@Component({ 
    selector: '[app-component]', 
    templateUrl: 'partials/app.html', 
    directives: [ 
     SomeComponent 
    ], 
    providers: [ 
     SomeService 
    ] 
}) 
export class AppComponent { 
    constructor() { } 
} 

bootstrap(AppComponent); 

SomeComponent

import {Component, Input} from 'angular2/core' 
import {SomeService} from '../services/some.service' 

@Component({ 
    selector: 'foo', 
    templateUrl: 'partials/foo.html' 
}) 
export class SomeComponent { 
    constructor() {} 
    @Input set someEvent(value) { 
     console.log(value); 
    } 
} 

SomeService

import {EventEmitter, Output} from 'angular2/core' 

export class CoreService { 
    constructor() { 
     this.someEvent = new EventEmitter(); 
    } 
    @Output() someEvent: EventEmitter<any>; 
    public foo() { 
     this.someEvent.emit(true); // Or next(true)? 
    } 
} 

Answer 1

@Output必須用於僅適用於不在服務中的組件。在此級別，您可以使用(...)語法在此事件中註冊。

從angular.io文檔（https://angular.io/docs/ts/latest/api/core/Output-var.html）：

聲明一個事件綁定輸出屬性。

當一個輸出屬性發出一個事件時，會調用一個附加到該事件的事件處理程序。

因爲你需要在這個事件明確訂閱，如下描述的服務：

import {Component, Input} from 'angular2/core' 
import {SomeService} from '../services/some.service' 

@Component({ 
    selector: 'foo', 
    templateUrl: 'partials/foo.html' 
}) 
export class SomeComponent { 
    constructor(service:CoreService) { 
    service.someEvent.subscribe((val) => { 
     console.log(value); 
    }); 
    } 
}