Как передать данные между двумя компонентами в Angular 2

Ответ 1

Вы можете передавать данные с помощью службы.

Сделайте службу, которая хранит данные при переключении компонентов. Ниже приведен пример.

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

@Injectable()
export class TransfereService {

  constructor(
    private router:Router,
    private companyServiceService:CompanyServiceService
  ) { }

  private data;

  setData(data){
    this.data = data;
  }

  getData(){
    let temp = this.data;
    this.clearData();
    return temp;
  }

  clearData(){
    this.data = undefined;
  }

}

Теперь рассмотрим 2 компонента Sender и Reciever.

Код отправителя: этот код устанавливает данные в службу и переходит к ресиверу.

import { Router } from '@angular/router';
import { TransfereService } from './services/transfer.service';

export class SenderComponent implements OnInit {         
  constructor(
    private transfereService:TransfereService,
    private router:Router) {}

  somefunction(data){
   this.transfereService.setData(data);
   this.router.navigateByUrl('/reciever');//as per router
 }
}

Код получателя: этот код извлекает данные из службы и очищает данные.

import { Router } from '@angular/router';
import { TransfereService } from './services/transfer.service';

export class RecieverComponent implements OnInit {  
 data = this.transfereService.getData();       
 constructor(
   private transfereService:TransfereService,
   private router:Router) {
      if(this.data){
        // do whatever needed
      }
      else{
        this.router.navigateByUrl('/sender');
      }
   }
}

Ответ 2

Вы можете использовать angular 2 входа для передачи данных компоненту. Например, в вашем дочернем классе введите входную переменную, используя angular 2 @Input decorator.

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'child',
  styles: [`
  `],
  template: `
  `
})
export class ChildComponent {
  @Input() valueToPass = 0;
}

В своем родительском компоненте (в котором вы вызываете свой дочерний компонент, передайте свой параметр следующим образом:

<child [valueToPass] = "value"></child>

Я рекомендую вам прочитать эту статью о передаче и получении аргументов между компонентами (https://toddmotto.com/passing-data-angular-2-components-input).

Ответ 3

Передача данных между компонентами - это двухсторонний процесс. В вашем случае предположим, что home.ts содержит объект с именем data.

1. В home.component.html, где вы использовали <map-component></map-component>, замените его на <map-component [data]="data"></map-component>.

2.В файле map.ts добавьте входы, например:

@Input() data: string;

3. Теперь вы можете использовать его в своем коде, например, как <p>{{data.title}}</p>

Надеюсь, что это поможет!

Ответ 4

Используйте sessionStorage, в угловых, где вы хотите установить данные, напишите его как

sessionStorage.setItem("key","value");

если вы хотите сохранить свой объект, напишите как

sessionStorage.setItem("key", JSON.stringify(obj));

затем компонент, в котором вы хотите получить значение right sessionStorage.getItem("key") или для всего объекта JSON.parse(sessonStorage.getKey("key");

Ответ 5

В Angular2 вы можете связываться между двумя компонентами, передавая объект в html.

Пример

home.html:

...
<map_selector [ObjectInMap]="ObjectInHome" ></map_selector>
...

Ответ 6

В Angular 4 используйте @Input для совместного использования объекта между родителем и дочерним. Здесь изменения в megmor (в родительском) или radfal (у ребенка) будут отражены в другом.

Родительский html:

<div>   
  <zoptil [radfal]="megmor"></zoptil>
  {{megmor.pergal}}
</div>

Родительский ts:

let megmor = new Kreven();
this.megmor.pergal = "warbar";

Детский html:

<div>
  <h2>{{radfal.pergal}}</h2>
  <label>Peragl: </label>
  <input [(ngModel)]="radfal.pergal" />
</div>

Ребенок ts:

@Input() radfal: Kreven;

Ответ 7

От родителей к ребенку: обмен данными с помощью ввода Это, вероятно, самый распространенный и простой метод обмена данными. Он работает с помощью декоратора @Input(), чтобы разрешить передачу данных через шаблон.

Дочерний к родителю: общий доступ к данным через ViewChild ViewChild позволяет одному компоненту быть внедренным в другой, предоставляя родителю доступ к его атрибутам и функциям. Однако одно предостережение заключается в том, что дочерние элементы не будут доступны до тех пор, пока представление не будет инициализировано. Это означает, что нам нужно реализовать хук жизненного цикла AfterViewInit для получения данных от дочернего элемента.

Дочерний к родителю: общий доступ к данным через Output() и EventEmitter Другой способ обмена данными - отправка данных от дочернего элемента, который может быть перечислен родителем. Этот подход идеален, когда вы хотите поделиться изменениями данных, которые происходят при таких вещах, как нажатие кнопок, ввод форм и другие пользовательские события.

В родительском объекте мы создаем функцию для получения сообщения и устанавливаем ее равной переменной сообщения.

В дочернем элементе мы объявляем переменную messageEvent с выходным декоратором и устанавливаем ее равной новому источнику событий. Затем мы создаем функцию с именем sendMessage, которая вызывает emit для этого события с сообщением, которое мы хотим отправить. Наконец, мы создаем кнопку для запуска этой функции.

Родитель теперь может подписаться на этот messageEvent, который выводится дочерним компонентом, а затем запускать функцию получения сообщения всякий раз, когда происходит это событие.

Несвязанные компоненты: обмен данными со службой При передаче данных между компонентами, у которых нет прямого соединения, такими как братья и сестры, внуки и т.д., Вам следует использовать общую службу. Когда у вас есть данные, которые всегда должны быть синхронизированы, я считаю, что RxJS BehaviorSubject очень полезен в этой ситуации.

Вы также можете использовать обычный RxJS Subject для обмена данными через сервис, но вот почему я предпочитаю BehaviorSubject.

Он всегда будет возвращать текущее значение в подписке - нет необходимости вызывать onnext. Он имеет функцию getValue() для извлечения последнего значения в виде необработанных данных. Это гарантирует, что компонент всегда получает самые последние данные. В сервисе мы создаем частный объект BehaviorSubject, который будет содержать текущее значение сообщения. Мы определяем переменную currentMessage, обрабатывающую этот поток данных как наблюдаемую, которая будет использоваться компонентами. Наконец, мы создаем функцию, которая вызывает следующий объект BehaviorSubject для изменения его значения.

Все родительские, дочерние и родные компоненты получают одинаковое лечение. Мы внедряем DataService в конструктор, затем подписываемся на наблюдаемый currentMessage и устанавливаем его значение равным переменной сообщения.

Теперь, если мы создадим функцию в любом из этих компонентов, которая изменяет значение сообщения. когда эта функция выполняется, новые данные автоматически передаются всем другим компонентам.

Ссылка: https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/