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

Using input/output events to trigger methods in a parent component in Angular 2

本文关键字：组件 方法 Angular 输入 输出 出事件      更新时间：2023-09-26

子服务如何通知父组件更改？我曾经通过在子服务中$watching一个变量来在角度 1 中执行此操作。不幸的是，这不再可能。

我尝试将服务注入回组件中，但这失败了，可能是由于循环依赖关系。根据我在当前文档中可以找到的内容，我想出了以下代码：

AppComponent
 |
SomeComponent
 |
SomeService

应用组件

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

一些组件

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

一些服务

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

@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);
    });
  }
}
相关文章：