Межкомпонентное общение с angular 2+ (от любого ребенка до любого родителя) - PullRequest
Новая
       18

Межкомпонентное общение с angular 2+ (от любого ребенка до любого родителя)

1 голос
/ 14 февраля 2020

Я работал над веб-приложением в Angular 2+. и у меня следующая ситуация 

component A
  |
  component B
    |
    component C
      |
      component D   //click on button -> call apis and return value to component A's variable

В component D есть кнопка, если пользователь нажимает на это, нам нужно вызвать rest API, и результат этого API должен быть показан в component A.

Бизнес-кейс: учтите, что component A - ваш верхний заголовок, который содержит количество точек и форму component D пользователь выполняет какую-то задачу, и в зависимости от этой задачи мне нужно увеличить эти точки.

I может достичь этой функциональности с помощью службы широковещания в angular Subject<BroadcastEvent> (после возврата значения API создать широковещание и в компоненте A я перечисляю это событие), но я не уверен, что если есть лучший способ сделать это. Или я не могу использовать один и тот же сервис в обоих компонентах, потому что мне нужно назначить значение в переменной, а также в шоу в DOM. Если мне нужно обновить только элемент DOM, то сервис может решить мою проблему, но мне также нужна переменная компонентов.

Ответы [ 2 ]

1 голос
/ 14 февраля 2020

если вы вызываете свой API в методе ComponentB, вы можете использовать

@ viewchild (ComponentA) ComponentA: ComponentA

в вашем ComponentB и Api результата присваивания из ComponentB для переменной или массива ComponentA. Например, вы определяете массив в ComponentA и:

ComponentA 

export class componentA { 
    points = [];
}

ComponentB 

import { HttpClient } from '@angular/common/http';
import { ComponentA } from '{{ComponentA_PATH}}/ComponentA';

export class ComponentB { 
    @viewchild(ComponentA) componentARef: ComponentA;

    constructor(private httpClient: HttpClient)

    GetPoints() {
    this.httpClient.get(your url).subscribe(
      result=>{
        componentARef.points.push(result);
              }
               }
}

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

1 голос
/ 14 февраля 2020

По моему опыту имеет смысл заставить сервис сохранять количество баллов. Затем этот сервис вводится в компонент D для вызова service.addPoints (). Эта служба также внедряется в компонент A для вызова service.getPoints ().

componentA.component.ts: 

export class componentA  {

constructor(public myService: MyService){}

}

componentA.component. html: 

{{myService.getPoints()}}

componentD.component.ts: 

export class componentD  {

constructor(public myService: MyService){}

}

componentD.component. html: 

<button (click)="{{myService.addPoints()"></button>

myService.ts: 

@Injectable()
export class MyService {
public points: number;

public getPoints(){
  return this.points;
}

public addPoints(){
  this.points = this.points +1;
}
}
...