Question

我想实现这一目标-

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

// component2
component1.load();

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

我已经通过互联网阅读了三种在组件之间共享数据的方法，在我的应用程序中，我正在使用服务共享在组件之间共享数据。

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

Answer 1

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

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

尝试一下

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

Answer 2

您可以使用<packages> <package id="Selenium.Firefox.WebDriver" version="0.21.0" targetFramework="net45" /> <package id="Selenium.Support" version="3.4.0" targetFramework="net45" /> <package id="Selenium.WebDriver" version="3.4.0" targetFramework="net45" /> <package id="Selenium.WebDriver.ChromeDriver" version="2.41.0" targetFramework="net45" /> <package id="Selenium.WebDriver.IEDriver" version="3.14.0" targetFramework="net45" /> </packages>。就是这样。

应用组件模板：

BehaviorSubject

EventService

App Component!

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

HelloComponent：

从'@ angular / core'导入{组件，输入};

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

同级组件：

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

}

这里是StackBlitz供您参考。

Answer 3

我认为您通常不会直接调用该方法。保持关注点分离是一件好事。最好的方法是使用可观察对象来解决这个问题。

服务：

从“ @ angular / core”导入{Injectable}；从'rxjs'导入{Subject};

@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可以订阅该事件。因此，任何组件都可以订阅该事件。因此，代码更具可扩展性和可维护性。

Angular：通过服务共享从不同组件调用函数

3 个答案: