web-dev-qa-db-ja.com

Angular 2で1つのコンポーネントから別のコンポーネントにメソッドを呼び出す方法は？

私は2つの異なるコンポーネントを持っています-1つのコンポーネントにはリストユーザーのクリックイベントメソッドがあり、詳細ページでそのクリックイベントメソッドを継承（呼び出し）したい（別のコンポーネント））

それを行う方法、私を助けてください...

回答の更新

あなたの答えをありがとう。

拡張クラスを使用し、コンストラクターでsuper（）を使用することで解決策が得られました。

ファーストクラス

export class TeamsView {
   constructor(private test:TestService){
   }
   ...
}

セカンドクラス

export class TeamsForm extends TeamsView {
   constructor(private test:TestService, private router: Router){
     super(test)
   }
   ...
}
angularextendssuperangular2-components
2
Jignesh Vagh

私はextendClassを使用し、コンストラクターでsuper（）を使用することで解決策を得ました。

ファーストクラス

export class TeamsView {
    constructor(private test:TestService){
    }
    ...
 }

セカンドクラス

export class TeamsForm extends TeamsView {
    constructor(private test:TestService, private router: Router){
      super(test)
    }
    ...
}

これを解決するためにコンストラクターでクラスを呼び出す実際のメソッドはわかりませんが、Angularサイトの1つからこれを見つけました。これは、私にとっても機能します。

0
Jignesh Vagh

1。あるコンポーネントから別のコンポーネントへのメソッドの呼び出し（親と子でない場合）は、サービスを使用してのみ可能です。

    //FirstComponent

    import {Component} from '@angular/core';
    import {CommonService} from './common.service';

    @Component({
      selector: '<first-component></first-component>',
      template: 'some html here',
      providers: [CommonService]
    })

    export class FirstComponent {
      constructor(private _service: CommonService) {
       this._service.callMethodOfSecondComponent(); 
      }

    }


    //CommonService

    import {Subject} from 'rxjs/Subject'; 

    @Injectable()
    export class CommonService {
      invokeEvent: Subject<any> = new Subject(); 

      callMethodOfSecondComponent() { 
        this.invokeEvent.next(someValue)      
      }
    }


     //SecondComponent

    import {Component, OnInit} from '@angular/core';
    import {CommonService} from './common.service';

    @Component({
      selector: '<second-component></second-component>',
      template: 'some html here',
      providers: [CommonService]
    })

    export class SecondComponent {
      constructor(private _service: CommonService) {
       this._service.invokeEvent.subscribe(value => {
        if(value === 'someVal'){
         this.callMyMethod(); 
       }
      }); 
      }

      callMyMethod(){
      //code block to run
      }
    }

2。子コンポーネントから親コンポーネントのメソッドを呼び出す

    //Child Component

    import {Component} from '@angular/core';
    @Component({
      selector: '<child-component></child-component>',
      template: 'some html here',
    })

    export class ChildComponent {
      @Output()
      emitFunctionOfParent: EventEmitter<any> = new EventEmitter<any>();
      constructor() {
      }

      someMethodOfChildComponent(){
       this.emitFunctionOfParent.emit(someValue); 
      }

    }

    //ParentComponent

    import {Component} from '@angular/core';
    @Component({
      selector: '<parent-component></parent-component>',
      template: `some html
                <child-component 
                (emitFunctionOfParent)="myMethod($event)">
                 </child-component>   
                 some html
                `,
    })

    export class ParentComponent {
      constructor() {
      }

      myMethod(someValue){
      // i am called
      }

    }

。親コンポーネントから子コンポーネントの呼び出し方法

//Child Component

    import {Component} from '@angular/core';
    @Component({
      selector: '<child-component></child-component>',
      template: 'some html here',
    })

    export class ChildComponent {

      constructor() {
      }

      someMethodOfChildComponentToBeCalled(){
       // i am called
      }

    }


//Parent Component

    import {Component, OnInit} from '@angular/core';
    import {ChildComponent} from './child.component';
    @Component({
      selector: '<parent-component></parent-component>',
       template: `some html
                <child-component>
                 </child-component>   
                 some html
                `
    })

    export class ParentComponent implements OnInit {
      @ViewChild(ChildComponent) private _child: 
      ChildComponent;

      ngOnInit() { 
      this._child.someMethodOfChildComponentToBeCalled();
      }



    }

これら以外のコミュニケーション方法もあるかもしれません。 :)

12
Niraj Paudel

あなたはこれを試すことができます：

<first-component (click)="mySecondComponent.myFunction()"></first-component>
<second-component #mySecondComponent></second-component>

myFunctionはパブリックである必要があります。

3
Ploppy

よりクリーンなソリューションを実現するには、このプロセスに従います。

注：1つのコンポーネントで、サービスからイベントエミッターを呼び出し、それを他のコンポーネントに発行する次のメソッドを呼び出します。

    service.ts:   

    import {Subject} from 'rxjs/Subject';

    private emitter: Subject<any> = new Subject<any>();

      set() {
       this.emitter.next({command: 'set', params:{a:1, b:2});
      };   
      getChangeEmitter() {
        return this.emitter;
      }

    component.ts

    import {Subscription} from 'rxjs/Subscription';

      private listener: Subscription;

     ngOnInit(): void {
        // Listen for changes in the service
  this.listener = this._service.getChangeEmitter()
      .subscribe(paramsFromService => {
        switch (paramsFromService.command) {
          case 'set':
           this.setMethod(paramsFromService);
            break;

          default:
            this.defaultMethod(paramsFromService);
            break;
        }
      });
      }
1
manideep pabba

共通のメソッドをサービスに追加

import {Injectable} from '@angular/core';
@Injectable()
export class MyService {
  constructor() { }
  doSomething(val) { 
    return !val;
  }
}

そのサービスを注入することにより、コンポーネントでそれを使用すると、1つのコンポーネントコードが続きます。他のコンポーネントでもこれと同じように書いてください。

import {Component, OnInit} from '@angular/core';
import {MyService} from './shared/my-service'; // see angular.io/styleguide

@Component({
  selector: '<my-component></my-component>',
  templateUrl: 'app/name.component.html',
  // This is unnecessary when installing MyService within Root NgModule
  providers: [MyService]
})

export class MyComponent implements OnInit {

  value1: boolean = true;

  constructor(private ms: MyService) {}

  ngOnInit() {  }

  click() { 
    this.ms.doSomething(value1);
  }
}

HTML

<input type="button" (click)="click()">
1
Veera

1.）最初に、最初のコンポーネントをターゲットコンポーネントにインポートする必要があります。

import { FirstComponent } from '../first.component';

2.）次に、次のような最初のコンポーネントのオブジェクトを作成する必要があります。

FirstComponentObject = new FirstComponent();

3.）次に、ターゲット（現在の）コンポーネントから最初のコンポーネントの関数を呼び出します。

FirstComponentObject.FirstComponentFunction();

ヘルプが必要な場合は、コメントしてください。読んでくれてありがとう。

0
ajay hariyal