web-dev-qa-db-ja.com

サービスからコンポーネントメソッドを呼び出す方法は？ （angular2）

1つのコンポーネントと対話できるサービスを作成します。私のアプリの他のすべてのコンポーネントは、このサービスを呼び出すことができ、このサービスはこのコンポーネントと対話する必要があります。

サービスからコンポーネントメソッドを呼び出す方法は？

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

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

この奉仕から？

@Injectable()

export class Service {


  callComponentsMethod() {
    //From this place?;
      }
}
angulartypescriptangular2-servicesangular2-componentsangular2-injection
15
Max K

コンポーネント間の相互作用は、実際にサービスを使用して実現できます。コンポーネント間通信に使用するサービスを、それを使用する必要があるすべてのコンポーネント（すべての呼び出し元コンポーネントと呼び出し先メソッド）に注入し、Observablesのプロパティを使用する必要があります。

共有サービスは次のようになります。

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

基本的な例 here を作成しました。Component1のボタンをクリックすると、Component2のメソッドが呼び出されます。

このテーマの詳細については、専用のドキュメントセクションを参照してください： https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

20
Tudor Ciotlos

質問コンポーネントの対話を要求しない、質問サービスからコンポーネントメソッドを呼び出すを要求します。

これは、コンポーネントにサービスを注入することで簡単に実現できます。次に、関数をパラメーターとして受け取るサービス内のメソッドを定義します。メソッドは、この関数をサービスのプロパティとして保存し、必要な場所で呼び出す必要があります。

// -------------------------------------------------------------------------------------
// 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 = timebarService;
  }

  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
  }
}
1
canbax

この投稿は少し古いので、チューダーの応答を実現します stackblitz

サービス

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

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

主成分

constructor(private communicationService:CommunicationService){}
  ngOnInit()
  {
    this.communicationService.customObservable.subscribe((res) => {
          this.myFunction(res)
        }
      );
  }
  myFunction(res:any)
  {
    alert(res)
  }

サービスのメソッドを呼び出す別のコンポーネント

constructor( private communicationService: CommunicationService  ) { }

  click() {
    this.communicationService.callComponentMethod("hello Word");
  }
0
Eliseo