Angular 7 - Обмен данными

Question

Каков наилучший способ обмена данными между компонентами в Angular 7?

Можно ли использовать @ Input и @ Output только для компонентов, которые находятся вотношение ребенка и родителя?

Answer 1

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

1. с использованием общего сервиса
2. с использованием состояния (new in angular 7.2) в state,Вы можете передавать данные, используя параметр состояния, используя маршрутизатор this.router.navigate(['/'], { state: { data: 'value' } });

или RouterLink

<a routerLink="/" [state]="{ data: 'value' }">Click here</a>

и перехватывать данные в NavigationStart Событие

router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => {
  const navigation = router.getCurrentNavigation();
  const data = navigation.extras.state.data ;
});

Answer 2

1.Родитель-ребенок

Если компоненты, имеющие отношение Родитель-ребенок

• @Input, @Output, EventEmitter - это хороший вариант

Например:

В дочернем компоненте

@Input() private dataFromParent: object;

@Output() dataToParentE = new EventEmitter<Event>();

this.dataToParentE.emit(data);

В родительском

<child-comp [dataFromParent]='dataFromParent' (dataToParentE)="dataToParentE($event)></child-comp>

2.Не связано

Мы можем использовать общую службу

Создать службу в угловых добавках и установщиках или получить данные с сервера, используя http

И вкомпоненты (в которых требуется передача данных) внедряют эту общую службу в конструктор и используют методы в службе для получения или обновления данных

constructor( private commonService: CommonService ) {}

Answer 3

Лучший способ обмена данными:

1. Использование декоратора input() для обмена данными между родителями и детьми.
2. Использование @ViewChild() и output()декораторы для совместного использования данных дочерними родителями.
3. Также EventEmitter для совместного использования данных дочерними родителями.
4. Для несвязанных компонентов вы можете использовать обмен данными с сервисом.

Answer 4

1.Если вы хотите общаться между родительским компонентом и дочерним компонентом. => i.Для ребенка

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

Внутри класса добавить @Input() private dummyData: object; для получения данных от родителя

и

@Output() dataSelected = new EventEmitter<Event>();

и создать событие с данными, которые будут переданы родителю с помощью

this.dataSelected.emit(dataToPass);

II.Для родительского элемента

В компонентном div

<child-comp [dummyData]='dummyData' (dataSelected)="dataSelected($event)></child-comp>

2.Если вы хотите обмениваться данными между компонентами на одном уровне

=> Использовать общий сервис для связи Создайте сервис с полезными функциями и импортируйте этот сервис в компоненты, где вы хотите, чтобы произошла связь.

Для получения дополнительной информации об этом типе связи см. Этот URL: http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject

Answer 5

Вы также можете напрямую использовать функцию в другом компоненте.

Например,

После этого внедрения вы можете использовать функцию childComponent внутри родительского компонента.

in parent.component.ts

@ViewChild(childComponent) childComponentRef: childComponent;
this.childComponentRef.myFunc();

Answer 6

Если ваши компоненты не связаны, есть два решения: вы можете использовать общий сервис (используя observable) или вы можете использовать ngrx / store.

Answer 7

Обмен данными работает с использованием @Input() декоратора или @Output() и EventEmitter, насколько я знаю: D, я новичок в использовании angular.