Question

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

怎么做，请帮帮我......

答案更新

感谢您的回答。

我通过使用extend Class＆amp;获得了解决方案。在构造函数中使用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

在服务中添加常用方法

OAuthSwift

通过注入该服务在组件中使用它，后面是一个组件代码。在其他组件中也写相同。

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

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

通过使用扩展类并在构造函数中使用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();

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

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

6 个答案: