Angular 9: нет подписки на другой компонент? - PullRequest
Новая
       73

Angular 9: нет подписки на другой компонент?

0 голосов
/ 25 апреля 2020

Я пытался создать приложение angular, которое считывает данные из формы и отправляет запрос в базу данных. Я использую наблюдаемые и подписываюсь, но это не работает. Я пытался console.log наблюдаемых данных при отправке формы, но это, похоже, не меняется. Вот код

Служба 

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';
import {QueryData} from './QueryData';
import {Subject} from 'rxjs';

@Injectable()
export class ForSubmitService {
  private subject = new Subject<QueryData>();
  sendData(data: QueryData) {
    this.subject.next(data);
  }
  getData(): Observable<QueryData> {
    return this.subject.asObservable();
  }
}

Компонент, отправляющий данные 

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
  providers: [ForSubmitService]
})

constructor(
    private formBuilder: FormBuilder,
    private submitService: ForSubmitService
  ) {
    this.form = this.formBuilder.group({
      selectedHemisphere: '',
      selectedMonth: this.thisMonth,
      }
    );
  }

  ngOnInit(): void {
  }

  onSubmit(formData) {
    const sendData = {northSelected: formData.selectedHemisphere === 'north',
      monthSelected: formData.selectedMonth};
    const data = new QueryData(sendData.northSelected, sendData.monthSelected);
    this.submitService.sendData(data); // This is the line sending the data
  }

Компонент, получающий данные 

@Component({
  selector: 'app-fish-list',
  templateUrl: './fish-list.component.html',
  styleUrls: ['./fish-list.component.css'],
  providers: [ForSubmitService]
})

export class ListComponent implements OnInit {
  listData;
  formData;
  subscription: Subscription;
  constructor(
    private db: AngularFirestore,
    private submitService: ForSubmitService ) {
    this.subscription = this.submitService.getData().subscribe(data => {console.log(data); this.formData = data; });
    // ^^^ This is the code that seems to not work
    console.log(this.formData);
    // console.log(this.subscription);
    // More database related code...
  }

  ngOnInit(): void {
  }

Любая помощь будет оценили. Спасибо!!

1 Ответ

0 голосов
/ 25 апреля 2020

В настоящее время каждый компонент видит свой собственный экземпляр ForSubmitService. Именно из-за этой строки в ваших компонентах: 

 providers: [ForSubmitService]

Если ForSubmitService является глобальным для вашего приложения, то измените декоратор @Injectable на: 

@Injectable({
  providedIn: 'root',
})

Read подробнее о провайдерах: Angular - Предоставление зависимостей в модулях

...