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);
    });
  }
}

使用输入/输出事件触发Angular 2中父组件中的方法

1 个答案: