Question

我有一个具有OutputEmitter输出的指令。我希望在完成对已发出事件的订阅订阅时执行某些操作。

（例如，当example.component的save（）完成时，我想做console.log（＆＃39; test＆＃39;）。 - 我知道我可以在example.component＆＃中做到这一点39; s保存方法，但我正在做一些通用的，所以我需要在指令中。）

import { Directive, OnInit, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appSingleActiveButton]'
})
export class SingleActiveButtonDirective {
  @Output() appSingleActiveButton: EventEmitter<any> = new EventEmitter();

  constructor() {}

  @HostListener('click', ['$event'])
  private onClick(e: any): void {
    this.appSingleActiveButton.next(e);
    //determine somehow that the referred function's subscription is completed and do something
    // for example what I tried is: this.appSingleActiveButton.subscribe(() => console.log('do some other stuff'))
  }
}

我有一个组件，它有一个带有该指令的元素，并传递一个返回Subscription的函数。

example.component.ts：

import { Component } from '@angular/core';
import { Subscription } from 'rxjs/Rx';
import { Http } from '@angular/http';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
})
export class ExampleComponent {

  constructor(private http: Http) {}

  public save(index: number): Subscription {
    const requestUrl = 'http://example.com';
    return this.http
    .get(requestUrl)
    .map((response) => response.json()).subscribe(() => console.log(`doing some stuff ${index}`));
  }
}

example.component.html

<div *ngFor="let btn of btns; let i = index">
    <div (appSingleActiveButton)="save(i)">test directive</div>
</div>

修改：问题如下：

我怎样才能确定save()在指令中实际完成（成功或错误）this.appSingleActiveButton.next(e);

Answer 1

按照我之前的回答和你的解释，这次我得到了你的问题。

对于您的解决方案，您可以通过多种方式完成所需操作。

鉴于指令只做同样的事情（HTTP调用）

为此，您只需将URL作为参数传递给您的指令，然后让direcdtive处理HTTP调用。您可以使用@Output来检索订阅并在组件中订阅它。

鉴于他们做的事情略有类似，并希望将逻辑保留在您的组件中

您可以将save函数直接作为@Input传递给您的指令。单击时，您可以运行此功能，并再次使用@Output来获取订阅。

您也可以直接在构造函数中引用元素，然后单击，调用该元素的函数。

这些是您可以实施的解决方案。如果您需要有关代码的帮助，请随时提出要求，但我不会这样给你，因为我不是你的代码猴，尝试是最好的学习方法。

将事件传递给指令并订阅它

1 个答案: