Как установить связь между компонентом в Angular?

Ответ 1

Если вы пытаетесь связаться с родительским компонентом дочернего компонента, это довольно четко описано с помощью @Input и EventEmitters с @Output в документах angular.

Angular 2-компонентное взаимодействие

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

angular-2-sibling-component-communication

Ответ 2

Использование службы:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class AppState {
  public _subject = new Subject<object>();
  public event = this._subject.asObservable();

  public publish(data: any) {
    this._subject.next(data);
  }
}

и вы можете публиковать события, подобные этому:

export class AppComponent {
  constructor(
    public appState: AppState
  ) {
    appState.publish({data: 'some data'});
  }
}

и вы можете подписаться на эти события:

export class HomeComponent {
  constructor(
    public appState: AppState
  ) {
    appState.event.subscribe((data) => {
      console.log(data); // {data: 'some data'}
    });
  }
}

Ответ 3

• @Input и @Output

  Если есть многочастные компоненты вы можете использовать @Input и @Output для обмена данными. Документ: https://angular.io/guide/component-interaction

  example: https://angular.io/generated/live-examples/component-interaction/eplnkr.html

• Инъекция зависимостей

  вы можете сохранить данные в Сервисе, а затем ввести Сервис в необходимый компонент. например, "user.server.ts" в примере:

  https://angular.io/generated/live-examples/dependency-injection/eplnkr.html

Ответ 4

Вам нужно будет использовать инъекцию зависимостей. Вот небольшой пример: https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js

Ответ 5

В angular есть API События, который может сделать это для вас.

Нажмите здесь, чтобы узнать подробности о событиях.

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

import {Events} из 'ionic- angular';

Использование:

  constructor(public events: Events) {
        /*=========================================================
        =  Keep this block in any component you want to receive event response to            =
        ==========================================================*/
        // Event Handlers
        events.subscribe('menu:opened', () => {
            // your action here
            console.log('menu:opened');
        });
        events.subscribe('menu:closed', () => {
            // your action here
            console.log('menu:closed');
        });
    }

    /*=====================================================
    = Call these on respective events - I used them for Menu open/Close          =
    ======================================================*/

    menuClosed() {
        // Event Invoke
        this.events.publish('menu:closed', '');
    }
    menuOpened() {
        // Event Invoke
        this.events.publish('menu:opened', '');
    }

  }

Ответ 6

Межкомпонентное взаимодействие может быть достигнуто в AngularJS. В AngularJS у нас есть нечто, называемое свойство require, которое необходимо отобразить в компоненте. Следуйте приведенному ниже примеру, чтобы получить доступ к функции addPane (параметр) компонента myTabs из компонента myPane: -

Структура проекта:

HTML

1. index.html
2. мой-tabs.html
3. мой-pane.html

JS

1. script.js

script.js

angular.module('docsTabsExample', [])
    .component('myTabs', {
      transclude: true,
      controller: function MyTabsController() {
        var panes = this.panes = [];
        this.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        };
        this.addPane = function(pane) {
          if (panes.length === 0) {
            this.select(pane);
          }
          panes.push(pane);
        };
      },
      templateUrl: 'my-tabs.html'
    })
    .component('myPane', {
      transclude: true,
      require: {          //This property will be used to map other component
        tabsCtrl: '^myTabs' // Add ^ symbol before the component name which you want to map.
      },
      bindings: {
        title: '@'
      },
      controller: function() {
        this.$onInit = function() {
          this.tabsCtrl.addPane(this);  //Calling the function addPane from other component.
          console.log(this);
        };
      },
      templateUrl: 'my-pane.html'
    });