Question

一个月前，我发布了一个小library，它只允许显示加载动画。

为此，我的用户只需将<ng-load></ng-load>添加到其模板中，然后在其组件中注入LoadService并调用loadService.animate(true)（或错误）。

在图书馆方面我做了以下事情：

在我的服务中：

@Injectable()
export class LoadService {
  // My event emitter
  @Output() animating: EventEmitter<any> = new EventEmitter();

  constructor() {}

  // Method called by the user to display the animation,
  // emits the value passed as parameter
  public animate(val: boolean) {
    this.animating.emit(val);
  }

  getValue(): any {
    return this.animating;
  }
}

在我的组件中：

@Component({
    selector: 'ng-load',
    templateUrl: './load.component.html',
    styleUrls: ['./load.component.css']
})
export class LoadComponent implements OnInit {      
    animate: boolean;

    constructor(public loadService: LoadService) {}

    ngOnInit(): void {
        // Listen to our event emitter
        this.loadService.getValue().subscribe((status: boolean) => {
            this.animate = status;
        });
    }
}

我的HTML模板只有一个<div *ngIf="animate">来显示或隐藏CSS动画。

所以我的事件发射器会发出我的用户提供给animate的内容，而我的布尔值应该在我的组件中发生变化，或者它在一个月前发生。

出于某种原因，我的事件发射器上的订阅没有捕获任何内容。

是否已更改EventEmitters？我是以错误的方式使用它们吗？

Answer 1

您的代码有多个问题。首先，@ Output用于组件而不是服务。其次，你订阅了getValue（），它没有返回一个Observable，订阅无法工作。第三，如果您希望您的服务将数据推送到订阅者，请使用Rx.Subject，因为EventEmitter只是Subject之上的另一个抽象层，其行为可能在将来发生变化。

Answer 2

由于您使用的是原始数据类型boolean，因此可能存在对象引用保持不变的情况，因此它不会触发订阅。

所以使用复杂的对象

 let animation ={
      allowAnimation : true/false
 };
 this.animating.emit(animation); // might trigger the subscription

增量计数器（数字）
```
 this.animating.emit(i++); 
```

注意：如果第一种情况没有触发，那么您可以更改引用和发射，这将导致订阅触发。

Angular 4 Event Emitter在订阅时没有捕获任何内容

2 个答案: