Angular 如何从服务调用组件方法？（2）

我想创建一个可以与一个组件交互的服务。 我的应用程序中的所有其他组件都应该能够调用此服务，并且此服务应该与此组件交互

如何从服务调用组件方法

@Component({
  selector:'component'
})
export class Component{

  function2(){ 
    // How call it?
  }
}

从这个服务

@Injectable()

export class Service {


  callComponentsMethod() {
    //From this place?;
      }
}

---

组件之间的交互确实可以通过使用服务来实现。您需要将用于组件间通信的服务注入所有需要使用它的组件（所有调用方组件和被调用方方法），并利用可观察对象的属性

共享服务可以如下所示：

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

@Injectable()
export class CommunicationService {

  // Observable string sources
  private componentMethodCallSource = new Subject<any>();
  
  // Observable string streams
  componentMethodCalled$ = this.componentMethodCallSource.asObservable();

  // Service message commands
  callComponentMethod() {
    this.componentMethodCallSource.next();
  }
}

接收器：

callMethod = function () {
   this.communicationService.callComponentMethod();
}

this.communicationService.componentMethodCalled$.subscribe(() => {
      alert('(Component2) Method called!');
});

我创建了一个基本示例，单击Component1中的按钮将调用Component2中的方法

---

如果你想阅读更多关于这个主题的内容，请参阅专门的文档部分：

因为这篇文章有点老了，我实现了都铎的回应

服务

private customSubject = new Subject<any>();
  customObservable = this.customSubject.asObservable();

  // Service message commands
  callComponentMethod(value:any) {
    this.customSubject.next(value);
  }

constructor( private communicationService: CommunicationService  ) { }

  click() {
    this.communicationService.callComponentMethod("hello word");
  }

调用服务方法的另一个组件

private customSubject = new Subject<any>();
  customObservable = this.customSubject.asObservable();

  // Service message commands
  callComponentMethod(value:any) {
    this.customSubject.next(value);
  }

constructor( private communicationService: CommunicationService  ) { }

  click() {
    this.communicationService.callComponentMethod("hello word");
  }

---

问题不要求组件交互，它要求从服务调用组件方法

这可以通过向组件注入服务来实现。然后在服务中定义一个方法，该方法将函数作为参数。该方法应将此函数保存为服务的属性，并在需要时调用它

// -------------------------------------------------------------------------------------
// codes for component
import { JustAService} from '../justAService.service';
@Component({
  selector: 'app-cute-little',
  templateUrl: './cute-little.component.html',
  styleUrls: ['./cute-little.component.css']
})
export class CuteLittleComponent implements OnInit {
  s: JustAService;
  a: number = 10;
  constructor(theService: JustAService) {
    this.s = theService;
  }

  ngOnInit() {
    this.s.onSomethingHappended(this.doThis.bind(this));
  }

  doThis() {
    this.a++;
    console.log('yuppiiiii, ', this.a);
  }
}
// -------------------------------------------------------------------------------------
// codes for service
@Injectable({
  providedIn: 'root'
})
export class JustAService { 
  private myFunc: () => void;
  onSomethingHappended(fn: () => void) {
    this.myFunc = fn;
    // from now on, call myFunc wherever you want inside this service
  }
}

---

您应该将

callComponentsMethod

方法提取到服务中，然后将服务注入两个位置。调用callComponentMethod，但不调用componentMethodCallSource。你知道为什么吗？我不太明白你的问题。最终结果是Component1从Component2调用一个方法。这不是您需要的吗？我不明白为什么，但不调用所需的函数。您的意思是在应用程序中，对吗？你能看看控制台里有没有错误吗？没有。没有错误。我只在callComponentMethod中看到console.logs，但它没有调用所需的方法。谢谢，您保存了我的day@canbax可以用这种方式将数据从服务发送到组件吗？@Raphael当然可以。您只需要将服务注入组件的构造函数中并使用该服务。这工作正常，但关键是出现了多个时间调用问题