Передать событие в директиву и подписаться на него - PullRequest
Новая
       20

Передать событие в директиву и подписаться на него

0 голосов
/ 28 мая 2018

У меня есть директива, которая имеет вывод EventEmitter.Я хотел бы сделать что-то, когда подписка на возвращенное подписанное событие завершено.

(например, я хотел бы сделать console.log ('test'), когда save () example.component равеня знаю, что могу сделать это в методе сохранения example.component, но я делаю что-то общее, поэтому мне нужно это в директиве). 

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

, и у меня есть компонент, содержащий элементс этой директивой и передайте функцию, которая возвращает подписку.

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

1 Ответ

0 голосов
/ 28 мая 2018

Следуя моему предыдущему ответу и вашим объяснениям, на этот раз я понял вашу проблему.

Для вашего решения у вас есть несколько способов сделать то, что вы хотите.

  1. Учитывая, что директива делает то же самое (HTTP-вызовы)

Для этого вы можете просто передать URL-адрес в качестве параметра вашемудиректива, и пусть директива обрабатывает вызов HTTP.Вы можете использовать @Output, чтобы получить подписку и подписаться на нее в своем компоненте.

Учитывая, что они немного похожи и хотят сохранить логику в вашем компоненте

Вы можете передать свою функцию save непосредственно как @Input вашемудирективы.При нажатии вы можете запустить эту функцию и снова использовать @Output для получения подписки.

Вы также можете напрямую взять ссылку на ваш элемент в конструкторе и по щелчку вызвать функцию этого элемента.

Это решения, которые вы можете реализовать.Если вам нужна помощь в коде, не стесняйтесь просить об этом, но я не даю ее вам так, потому что я не ваша обезьяна кода, и попытка - лучший способ научиться.

...