Обмен данными между компонентами в Angular 6 - PullRequest
Новая
       6

Обмен данными между компонентами в Angular 6

0 голосов
/ 27 ноября 2018

Я создал 2 компонента и один сервис, как показано ниже,

component-взаимодействия.service.ts 

@Injectable()
export class ComponentInteractionService {

  public dataSubject = new BehaviorSubject<string>("Test");

  getTestData(): Observable<any> {
    return this.dataSubject.asObservable();
  }

  pustTestData(dataToPush: string): void {
    this.dataSubject.next(dataToPush);
  }
}

first.component.ts 

export class FirstComponent {

  constructor(private componentInteractionService: ComponentInteractionService) { 
    componentInteractionService.getTestData().subscribe(data=> {
      console.log("Received at 1 -- " + data);
    });
  }

  sendTestData(): void {
    this.componentInteractionService.pustTestData("sending data from 1");
  }

}

second.component.ts 

export class SecondComponent {

  constructor(private componentInteractionService: ComponentInteractionService) { 
    componentInteractionService.getTestData().subscribe(data=> {
      console.log("Received at 2 -- " + data);
    });
  }
}

Проблема, с которой я сейчас сталкиваюсь,

При загрузке страницы запускаются оба подписчика компонентов, но когда я отправляю данные с помощью sendTestData () метод в FirstComponent , только подписчик в FirstComponent запускается.Абонент в SecondComponent не запускается.Что я должен сделать для обоих подписчиков, чтобы инициировать отправку данных с помощью метода sendTestData () ?

Журналы моей консоли приведены ниже.

Получено в 1 - Тест

Получено в 2 - Тест

Получено в 1 - отправка данных из 1

Ожидаемый вывод ..

Получено в 1 - тест

Получено в 2 - тест

Получено в 1 - отправка данных от 1

Получено в 2 - отправка данных от 1

Ответы [ 3 ]

0 голосов
/ 27 ноября 2018 
 sendTestData(): void {
  this.componentInteractionService.pustTestData("sending data from 1");
  // must call the observable once after adding new data
  this.commonService.getData();
 }

Вы должны вызвать наблюдаемое после установки новых данных для субъекта поведения.

0 голосов
/ 27 ноября 2018

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

Пустой providers массив обоих компонентов и предоставление услуги в пределах app.module.ts

@Component({
  selector: 'app-distinct-first-component',
  template: '<button (click)="sendTestData()">Click to send Data</button>',
  providers: [ComponentService] // <= remove this line from both components
})

app.module.ts

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, 
  FirstComponent, SecondComponent
  ],
  bootstrap:    [ AppComponent ],
  providers: [ComponentService] // <= provide it here
})
export class AppModule { }
0 голосов
/ 27 ноября 2018

работает нормально для меня.проверьте это демо консоль

и вот соответствующий код

common.service.ts 

@Injectable()
export class CommonService {

public dataSubject$: Subject<string> = new BehaviorSubject<string>("Test");

getData(): Observable<any> {
    return this.dataSubject$.asObservable();
}

setData(dataToPush: string): void{
    this.dataSubject$.next(dataToPush);
 }
}

first.component.ts 

@Component({
    selector: 'app-first',
    template: `First Component data`,
})

export class FirstComponent implements OnInit {

constructor(
      private commonService: CommonService,
    ) { 

    }

    ngOnInit(){
      this.sendCommonData();
      this.getCommonData();
    }

 getCommonData () {
   this.commonService.getData().subscribe(data=> {
        console.log("Received at 1 -- " + data);
    })
 }

sendCommonData() {
    this.commonService.setData("sending data from first");
}

}

second.component.ts 

import { Component, OnInit } from '@angular/core';

import { CommonService } from './common.service';

@Component({
    selector: 'app-second',
    template: `Second Component data `,
})

export class SecondComponent implements OnInit {

constructor(
      private commonService: CommonService,
    ) { 

    }

    ngOnInit(){
      this.getCommonData();
    }

 getCommonData () {
   this.commonService.getData().subscribe(data=> {
        console.log("Received at 2 -- " + data);
    })
 }


}
...