其他组件的Angular2调用方法 [英] Angular2 call method of other component

问题描述

我有一个Angular2应用，其中创建了一个Header组件，该组件呈现在我的主App组件中.

I have an Angular2 app in which I created an Header component, that's rendered in my main App component.

现在，我还有另一个Form组件，应该将其Submit按钮放置在Header中.我该怎么办?

Now, I have an other Form component that should have its submit button placed in the Header. How could I do that?

我有点需要在Header中的Submit按钮和Form组件的Submit方法之间进行通信.我知道进行parent> child或child> parent交流很简单，但是在这种情况下，Header和Form组件之间没有父子关系，也没有兄弟关系.

I sort of need to communicate between the submit button in the Header and the submit method of the Form component. I know it's trivial to do parent>child or child>parent communication, but in this case there is no parent-child relationship nor sibling relationship between my Header and Form components.

我的组件树如下:

- app-root
  |-- app-header // -> this is where the submit button is
  |-- app-edit-profile
      |-- app-profile-form // -> this is my form

有人对可能的实现有任何想法吗?

Does someone have any idea of a possible implementation?

推荐答案

您可以创建一项在标头和表单组件之间共享的服务，您可以在其中定义Observable，以便可以从中订阅该Observable当您从标头接收到一些值时，表单并执行一些操作.

You can create one service which is shared between your header and form component in which you can define Observable so that you can subscribe to that Observable from form and perform some action when you receive some value from header.

common.service.ts

import { Injectable, Inject } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class CommonService {
  private notify = new Subject<any>();
  /**
   * Observable string streams
   */
  notifyObservable$ = this.notify.asObservable();

  constructor(){}

  public notifyOther(data: any) {
    if (data) {
      this.notify.next(data);
    }
  }
}

header.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { CommonService } from './common.service';

@Component({
  selector   : 'header',
  templateUrl : './header.html'
})
export class HeaderComponent implements OnInit, OnDestroy {
  constructor( private commonService: CommonService ){
  }

  ngOnInit() {       
  }

  onSubmit(){
    // this method needs to be called when user click on submit button from header
    this.commonService.notifyOther({option: 'onSubmit', value: 'From header'});
  }
}

form.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { CommonService } from './common.service';

@Component({
  selector   : 'form',
  templateUrl : './form.html'
})
export class FormComponent implements OnInit, OnDestroy {
  private subscription: Subscription;
  constructor( private commonService: CommonService ){
  }

  ngOnInit() {
    this.subscription = this.commonService.notifyObservable$.subscribe((res) => {
      if (res.hasOwnProperty('option') && res.option === 'onSubmit') {
        console.log(res.value);
        // perform your other action from here

      }
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

这篇关于其他组件的Angular2调用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！