如何在 Angular 2 中从一个组件调用方法到另一个组件？

Question

我有两个不同的组件 - 一个组件具有用于列表用户的点击事件方法，我想继承（调用）详细信息页面上的点击事件方法（另一个组件））

怎么做，请帮帮我...

答案更新

感谢您的回答。

我已经通过使用扩展 Class 和在构造函数中使用 super() 得到了解决方案。

第一个Class

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

第二个Class

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

Answer 1

你可以试试这个：

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

myFunction 必须是 public.

Answer 2

在服务中添加常用方法

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 3

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 4

要获得更清洁的解决方案，请遵循此过程。

注意：在一个组件中调用以下方法，该方法从服务调用事件发射器并将其发射到另一个组件。

    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 5

我已经通过在构造函数中使用 extend Class 和 super() 得到了解决方案。

第一个Class

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

第二个Class

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

我不知道它在构造函数中调用 class 来解决这个问题的真正方法，但我从 Angular 网站之一找到了它，它也对我有用.

Answer 6

1.) 首先，您需要将第一个组件导入到您的目标组件中。

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

2.) 然后你需要像这样创建第一个组件的对象：

FirstComponentObject = new FirstComponent();

3.) 然后从目标（当前）组件调用第一个组件的函数

FirstComponentObject.FirstComponentFunction();

如果您需要任何帮助，请发表评论。感谢阅读。

如何在 Angular 2 中从一个组件调用方法到另一个组件？

How to invoke method from one component to another component in Angular 2?

extends

super

angular2-components

angular