221

次のように 2 つのコンポーネントがあり、別のコンポーネントから関数を呼び出したいと考えています。両方のコンポーネントは、3 番目の親コンポーネント using ディレクティブに含まれています。

コンポーネント 1:

@component(
    selector:'com1'
)
export class com1{
    function1(){...}
}

コンポーネント 2:

@component(
    selector:'com2'
)
export class com2{
    function2(){...
        // i want to call function 1 from com1 here
    }
}

@inputandを使用してみまし@outputたが、その使用方法とその関数の呼び出し方法が正確にわかりません。誰か助けてもらえますか?

4

11 に答える 11

156

com1 と com2 が兄弟である場合は、使用できます

@component({
  selector:'com1',
})
export class com1{
  function1(){...}
}

com2 は、EventEmitter

@component({
  selector:'com2',
  template: `<button (click)="function2()">click</button>`
)
export class com2{
  @Output() myEvent = new EventEmitter();
  function2(){...
    this.myEvent.emit(null)
  }
}

ここで、親コンポーネントはイベント バインディングを追加してイベントをリッスンし、そのようなイベントが発生したとき myEventに呼び出します。テンプレートの他の場所からこの要素を参照できるようにするテンプレート変数です。これを使用してofのイベント ハンドラーを作成します。com1.function1()#com1function1()myEventcom2

@component({
  selector:'parent',
  template: `<com1 #com1></com1><com2 (myEvent)="com1.function1()"></com2>`
)
export class com2{
}

コンポーネント間で通信するためのその他のオプションについては、component-interactionも参照してください

于 2016-06-02T09:29:59.710 に答える
28

コンポーネント間の関係 (親/子) によって異なりますが、コンポーネントを通信させるための最善の一般的な方法は、共有サービスを使用することです。

詳細については、次のドキュメントを参照してください。

そうは言っても、次を使用して com1 のインスタンスを com2 に提供できます。

<div>
  <com1 #com1>...</com1>
  <com2 [com1ref]="com1">...</com2>
</div>

com2 では、以下を使用できます。

@Component({
  selector:'com2'
})
export class com2{
  @Input()
  com1ref:com1;

  function2(){
    // i want to call function 1 from com1 here
    this.com1ref.function1();
  }
}
于 2016-06-02T09:25:43.683 に答える
2

実際のシナリオでは、単純な関数を呼び出すのではなく、適切な値を持つ関数を呼び出します。それでは、詳しく見ていきましょう。これがシナリオです。ユーザーは、自分のコンポーネントからイベントを発生させる必要があり、最後に別のコンポーネントの関数も呼び出したいと考えています。サービスファイルが両方のコンポーネントで同じであるとしましょう

componentOne.html

    <button (click)="savePreviousWorkDetail()" data-dismiss="modal" class="btn submit-but" type="button">
          Submit
        </button>

ユーザーが送信ボタンをクリックすると、独自のコンポーネント componentOne.ts で savePreviousWorkDetail() を呼び出す必要があり、最後に別のコンポーネントの関数も呼び出す必要があります。そのため、サービス クラスの関数を componentOne.ts から呼び出すことができ、それが呼び出されると、componentTwo の関数が起動されます。

componentOne.ts

constructor(private httpservice: CommonServiceClass) {
  }

savePreviousWorkDetail() {
// Things to be Executed in this function

this.httpservice.callMyMethod("Niroshan");
}

commontServiceClass.ts

import {Injectable,EventEmitter} from '@angular/core';

@Injectable()
export class CommonServiceClass{

  invokeMyMethod = new EventEmitter();

  constructor(private http: HttpClient) {
  }

  callMyMethod(params: any = 'Niroshan') {
    this.invokeMyMethod.emit(params);
  }

}

以下は、componentOneから呼び出す必要がある関数を持つcomponentTwoです。そして ngOnInit() では、呼び出されたメソッドをサブスクライブする必要があるため、メソッドがトリガーされると methodToBeCalled() が呼び出されます

componentTwo.ts

import {Observable,Subscription} from 'rxjs';


export class ComponentTwo implements OnInit {

 constructor(private httpservice: CommonServiceClass) {
  }

myMethodSubs: Subscription;

ngOnInit() {
    
    this.myMethodSubs = this.httpservice.invokeMyMethod.subscribe(res => {
      console.log(res);
      this.methodToBeCalled();
    });
    
methodToBeCalled(){
//what needs to done
}
  }

}
于 2020-09-13T13:04:53.403 に答える
0

無関係なコンポーネントについては、共有サービスを使用してこの単純な方法を使用します。

//あなたのサービス

private subject = new Subject<any>();
sendClickEvent() {
  this.subject.next();
}
getClickEvent(): Observable<any>{ 
  return this.subject.asObservable();
}
}

//ボタンがあるコンポーネント

clickMe(){
this.YourServiceObj.sendClickEvent();
}

<button (click)="clickMe()">Click Me</button>

//クリックイベントを受け取るコンポーネント

    this.sharedService.getClickEvent().subscribe(()=>{
    this.doWhateverYouWant();
    }

)
于 2022-01-28T11:50:49.867 に答える