Как вызвать метод из одного компонента в другой компонент в Angular 2?

Question

У меня есть два разных компонента - один компонент имеет метод события click для пользователей списка, и я хочу унаследовать (вызвать) метод события click на странице сведений (другой компонент))

Как это сделать, пожалуйста, помогите мне...

ОТВЕТИТЬ ОБНОВЛЕНИЕ

Спасибо за ваши ответы.

Я получил решение с помощью расширения класса и с помощью super () в конструкторе.

Первый класс

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

Второй класс

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

Answer 1

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
      }

    }

3. Вызов метода дочернего компонента из родительского компонента.

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



    }

Могут быть и другие способы общения, кроме этих.:)

Answer 2

Вы можете попробовать это:

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

myFunction должен быть публичным.

Answer 3

Чтобы получить более чистое решение, следуйте этому процессу.

Примечание. В одном компоненте вызовите следующий метод, который вызывает источник событий из службы и передает его другому компоненту.

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

Answer 4

Добавить общий метод в сервис

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

Используйте это в компонентах, вводя эту услугу, один код компонента следует. Напишите так же, как это в другом компоненте тоже.

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()">

Answer 5

Я получил решение с помощью расширения класса и с помощью super() в конструкторе.

Первый класс

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

Второй класс

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

Я не знаю его реального метода вызова класса в конструкторе для решения этой проблемы, но я нашел это на одном из сайтов Angular, и он также работает для меня.

Answer 6

1.) Во-первых, вам нужно импортировать первый компонент в целевой компонент.

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

2.) Затем вам нужно создать объект первого компонента следующим образом:

FirstComponentObject = new FirstComponent();

3.) Затем вызовите функцию первого компонента из целевого (текущего) компонента.

FirstComponentObject.FirstComponentFunction();

Если вам нужна помощь, прокомментируйте. Спасибо за прочтение.