Angular : 从具有服务共享的不同组件调用函数

Question

我想实现这个 -

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

// component2
component1.load();

所以，基本上我只是想从一个组件调用不同组件的功能。

我在网上了解到有 3 种方法可以在组件之间共享数据，在我的应用程序中，我使用服务共享在我的组件之间共享数据。

但是我如何才能使用服务共享方法简单地从不同的组件调用函数？

Answer 1

您可以使用以下基于 observables 的服务。它使用消息作为字符串，但如果您需要在组件之间传递数据，您可以使其更通用。在我的正常服务中，我通常会传递一条包含消息类型和消息数据的消息，例如

基本上，一个组件广播消息，另一个收听消息

试试这个

留言-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

组件2

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

Answer 2

我觉得你一般不会直接调用方法。保持关注点分离很好。最好的方法是使用 observables 来处理这个问题。

服务：

从“@angular/core”导入{可注射}；从 '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();
  }


}

组件 1：

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

load() {

}

组件 2

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

这样 component2 就可以随时发布事件了。就此而言，任何组件都可以随时调用该事件。 Component1 可以订阅该事件。就此而言，任何组件都可以订阅该事件。所以代码更可扩展，更可维护。

Answer 3

您可以使用 BehaviorSubject。方法如下。

应用程序组件模板：

App Component!

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

事件服务

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

你好组件：

从“@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);
  }

}

同级组件：

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供您参考。

Angular : 从具有服务共享的不同组件调用函数

Angular : Call Function from different component with Service Sharing

service

angular

angular5

angular6