Метод вызова Angular2 другого компонента

У меня есть приложение Angular2, в котором я создал компонент заголовка, который отображается в моем основном компоненте приложения.

теперь у меня есть другой компонент формы, который должен иметь свою кнопку отправки, помещенную в заголовок. Как я мог это сделать?

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

мое дерево компонентов выглядит так:

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

кто-нибудь имеет представление о возможной реализации?

10
angular

4 ответов

вы можете создать одну службу, которая совместно используется между вашим заголовком и компонентом формы, в котором вы можете определить Observable, Так что вы можете подписаться на этот Observable из формы и выполните некоторые действия, когда вы получите некоторое значение из заголовка.

общие.услуга.ТС

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

.деталь.ТС

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

форма.деталь.ТС

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

В дополнение к решению с наблюдаемым, я думаю, что важно сказать что-то о EventEmitters, поскольку они, на мой взгляд, проще использовать в такого рода сценариях.

в дочернем контроллере

импортируйте EventEmitter и типы вывода.

import { EventEmitter, Output } from "@angular/core

объявить выходное свойство типа EventEmitter

@Output() formSubmit$: EventEmitter<boolean>;

не забудьте инициализировать EventEmitter в конструктор следующим образом:

this.formSubmit$ = new EventEmitter();

и, наконец, с правильным действием, привязанным к кнопке отправки, запустите метод EventEmitter "emit" для распространения события через ваше приложение:

this.formSubmit$.emit(true);

в Родительском контроллере

в представлении родителя свяжите событие formSubmit$ с действием контроллера:

<child-selector (formSubmit$)="handleFormSubmit($event)"></child-selector>

затем объявите метод в Контроллер

public handleFormSubmit(submit: boolean): void {
    alert("Form has been submitted! Do your stuff here!");
}

очевидно, что такая стратегия может быть использована только когда вам нужно обменять данные от ребенка к родительскому регулятору.

2

родители и дети общаются через службу

метод вызова Angular2 другого компонента

2

использование услуг и предметов-самый простой способ. Если вы хотите сохранить запись своих данных, вы даже можете использовать replay subject

private notify: ReplaySubject<any> = new ReplaySubject<any>();

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

1