Angular: вызов функции из другого компонента с разделением службы

Question

Я хочу добиться этого -

// component1
load(){ 
  // code... 
}

// component2
component1.load();

Итак, я просто хочу вызвать функцию компонента из компонента.

Я прочитал в Интернете, что существует 3 способа обмена данными между компонентами. В своем приложении я использую общий доступ к службам для обмена данными между моими компонентами.

Но как я могу просто вызвать функцию из другого компонента с помощью подхода к совместному использованию услуг?

Answer 1

Я не думаю, что вы обычно вызываете метод напрямую. Хорошо держать разделение проблем. Для этого лучше всего использовать наблюдаемые.

Услуги:

import {Injectable} из '@ angular / core'; import {Subject} from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class EventService {

  myEvent: Subject<void>;

  constructor() { 
     this.myEvent = new Subject<void>();
  }

  getEvent() {
      return this.myEvent.asObservable();
  }

  callEvent() {
      this.myEvent.emit();
  }


}

Component1:

constructor(private eventService: EventService);
ngOnInit() {
    this.eventService.subscribe(event => this.load())
} 

load() {

}

Component2

constructor(private eventService: EventService);
ngOnInit() {
    this.eventService.callEvent();
} 

Таким образом component2 может публиковать событие в любое время. В этом отношении любой компонент может вызвать событие в любое время. И Component1 может подписаться на событие. В этом отношении любой компонент может подписаться на событие. Таким образом, код является более расширяемым и более обслуживаемым.

Answer 2

Вы можете использовать BehaviorSubject. Вот как.

Шаблон компонента приложения:

App Component!

<hello></hello>
<sibling></sibling>

1007 * Организация мероприятий *

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class EventService {
  event: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  emitEvent(data) {
    console.log('next Called with ', data);
    this.event.next(data);
  }
}

HelloComponent:

import {Component, Input} из '@ angular / core';

import { EventService } from './event.service';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {

  constructor(private eventService: EventService) {}

  ngOnInit() {
    this.eventService.event
      .subscribe(data => {
        console.log('data received', data);
        this.someMethod(data);
      });
  }


  someMethod(data) {
    console.log('some method got called!', data);
  }

}

Siblingcomponent:

import { Component, Input } from '@angular/core';

import { EventService } from './event.service';

@Component({
  selector: 'sibling',
  template: `<button (click)="onClick()">Call Hello Component's Method</button>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class SiblingComponent  {

  constructor(private eventService: EventService) {}

  onClick() {
    console.log('onClick Called');
    this.eventService.emitEvent({ foo: 'bar' });
  }

}

Вот вам StackBlitz для справки.

Answer 3

Вы можете использовать следующий сервис на основе наблюдаемых. Он использует сообщения в виде строки, но вы можете сделать его более общим, если вам нужно передать данные между компонентами. В моих обычных службах я обычно передаю сообщение, которое содержит тип сообщения и данные сообщения, например

Обычно один компонент передает сообщение, а другой слушает сообщения

Попробуйте это

сообщение-service.ts

import {Injectable} from '@angular/core';
import {Observable, Subject} from "rxjs";


@Injectable()
export class MessageService
{
  //subject to trigger events
  private mySubject: Subject<any> = new Subject<string>();
  //observable to listen to events
  public readonly messageReceived$: Observable<string> = this.mySubject.asObservable();

  //
  brodcast(message: string)
  {
    this.mySubject.next(message );
  }
}

component1.ts

constructor(private service: MessageService){}
//...
this.service.broadcast('triggerLoadMethod'); //broadcast a message for service subscriber to receive

component2

constructor(private service: MessageService)
{
    //subscribe to observableto receive messages
    this.service.messageReceived$.subscribe( message =>
        {
        if(message == 'triggerLoadMethod') //if we are interested in the message, process it
        {
            this.load();
        }
    });
}