Какое разумное решение для отправки информации из компонента Angular в другой компонент-аналог? - PullRequest
Новая
       31

Какое разумное решение для отправки информации из компонента Angular в другой компонент-аналог?

0 голосов
/ 12 июля 2020

Я новичок в Angular и сомневаюсь, что может быть хорошим способом, позволяющим объединить два компонента в моем приложении. Я знаю, что существуют разные стратегии, и я хочу понять, что может быть хорошим выбором для моего конкретного c случая.

В основном у меня такая ситуация:

enter image description here

As you can see in the previous screenshot I have two components:

  • The left one containing the list of the people.
  • The right one containing a calendar

So basically when I click the funnel icon in the component 1 (the people list) the following methodo into this compoenent typescript code will be executed:

onClickFilter(person, event) { console.log("onClickFilter START. person is: ", person); }

The person object is the one containing the information that I have to send to the component 2 (the calendar component on the right).

I was reading here about how allow components comunication:

https://medium.com/@mirokoczka / 3-способа связи между- angular -components-a1e3f3304ecb

, а также здесь: https://angular.io/guide/component-interaction

Но я не знаю, какой лучший выбор. В частности, в официальной документации Angular я могу найти способ перехода от родителя к потомку (но здесь эти компоненты являются братьями и сестрами).

Идея состоит в том, чтобы создать событие в компоненте 1 (список людей) и подпишитесь на него в компоненте 2 (календаре), но я не уверен, что он слишком плотный.

Что может быть умным решением в этом случае использования?

Первый

Ответы [ 3 ]

2 голосов
/ 12 июля 2020

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

Как мы его используем?

Сначала создайте data.service.ts 

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }

  dataToBePassed = new Subject<any>();
  dataToBePassedObs = this.dataToBePassed.asObservable();
  
  changeData(newData: any) {
    this.dataToBePassed.next(newData);
  }

}

Затем вам нужно будет внедрить эту службу в оба компонента, между которыми вы хотите обмениваться данными. Одна сторона будет продолжать отправлять данные, а другая будет слушать (подписываясь).

listener-sibling.component.ts

export class ListenerSibling implements OnInit {

  someData: any;

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.dataToBePassedObs().subscribe((data) => {
        this.someData = data;
    })
  }

}

sender-sibling.component.ts

export class SenderComponent implements OnInit {

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
  }

  sendData() {
    this.dataService.changeData('sending new data');
  }

}
2 голосов
/ 12 июля 2020

Используйте декоратор Input() для передачи данных. В вашем случае тот, кто отправляет данные другому компоненту, является родителем. Кто получает данные, так это Ребенок. Когда вам нужно отправить данные от Родителя к Ребенку, мы используем @Input(). Когда нам нужно отправить данные от ребенка к родительскому, мы используем @OutOut() и EventEmitter.

В вашем случае его определенно component1 является родительским, а component2 - дочерним.

В вашем component1.ts, определите свойство, которое должно передавать данные компоненту 2. В моем случае, скажем, personDetails. И в вашем методе onclick выполните свои операции и назначьте детали свойству personDetails. 

export class Component1  {
  personDetails: ShiftDetail;

  onClickFilter(data: any) {
    // do the logics
    this.personDetails = data;
  }
}

В вашем файле component2.ts определите свойство с @Input() декоратором. Это свойство будет получать детали от component1. 

export class Component2  {
  @Input() personDetailsInput: ShiftDetail;
}

Чтобы назначить детали из свойства component1 personDetails для component2 personDetailsInput, используйте файл component1. html. Используйте привязку свойства, чтобы присвоить значение. 

<component2 [personDetailsInput]="personDetails"></component2>

Для справки используйте Angular официальную документацию. Приложение-герой-злодей определит все.

1 голос
/ 12 июля 2020

Мне неясно, как именно настроено ваше приложение. Я вижу список людей и календарь, и вы называете их «братьями и сестрами», но мне не совсем понятно, как работает навигация. Вот варианты, которые я вижу.

  1. Если и список, и календарь появляются на экране одновременно, они фактически являются братьями и сестрами, и оба будут дочерними элементами родительский компонент. Таким образом, щелчки дочернего элемента A могут быть переданы родительскому элементу через Emit, а затем переданы обратно дочернему элементу B через ViewChild.

  2. Нажатие на пользователя в представлении списка может «маршрутизировать» вы перейдете в представление календаря, и в этом случае использование queryParams будет хорошо работать для передачи userId в календарь

  3. При нажатии на пользователя может появиться всплывающее модальное окно календаря, которое означает, что вы можете передавать данные непосредственно из представления A в представление B с помощью ViewChild. Или даже пропустите ViewChild и передавайте данные напрямую, используя теги html.

...