Angular Связь из компонента приложения с маршрутом - PullRequest
Новая
       26

Angular Связь из компонента приложения с маршрутом

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

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

В app.component.ts у меня есть 

import { Component, OnInit, OnDestroy } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Subscription } from 'rxjs';
import { MessageService } from './message.service';

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

export class AppComponent implements OnInit, OnDestroy{
public message = "Discover Workouts";
public state:boolean = false; 

subscription: Subscription;
  
  //Inject MessageService
  constructor(private messageService: MessageService) {
    this.subscription = this.messageService.getMessage()
      .subscribe(mymessage => this.message = mymessage)
  }
ngOnInit(){
}
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

In workout- options.ts У меня это 

import { Component, Output, EventEmitter,  OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { MessageService } from '../message.service';
import { Sio2service } from '../sio2.service';

@Component({
  selector: 'app-workout-options',
  templateUrl: 'workout-options.component.html',
  styleUrls: ['../app.component.css']
})
export class WorkoutOptionsComponent implements OnDestroy{
mymessage: string;
subscription: Subscription;

@Output() public childEvent = new EventEmitter();
  constructor(private messageService: MessageService) {
this.subscription = this.messageService.getMessage()
.subscribe(mymessage => { this.mymessage = mymessage; });
}

OnInit(){
 }
 
FupdateParent(exerName:string) {
    this.messageService.updateMessage(exerName);
//  this.sio2.sendMsg(exerName);
//console.log(exerName);
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

, а в message.service - 

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
 
@Injectable({ providedIn: 'root' })
export class MessageService {
    private myMessage = new Subject<string>();
 
    updateMessage(message: string) {
        this.myMessage.next(message);
    }
 
    clearMessage() {
        this.myMessage.next();
    }
 
    getMessage(): Observable<string> {
        return this.myMessage.asObservable();
    }
}

Пока все работает нормально. Но когда я пытаюсь получить в start-workout.ts (который реализован как маршрут) значение, отправленное последним компонентом (который также реализован как маршрут), я не могу.

Вот что я пробовали.

В start-workout.component.ts у меня есть это (часть кода) 

export class StartWorkoutComponent implements OnInit{
public message = "";
subscription: Subscription;

  constructor(private messageService: MessageService, private httpClient: HttpClient){
this.subscription = this.messageService.getMessage()
.subscribe(mymessage => { this.message = mymessage; });
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

Я должен делать что-то не так. Может ли кто-нибудь помочь мне

Ответы [ 2 ]

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

Проблема здесь 

private myMessage = new Subject<string>();

Тема активируется только для тех подписок, которые подписаны во время запуска события. Чтобы получить данные по другому маршруту, вы должны изменить сообщение на ReplaySubject, которое предоставляет значение всем, независимо от того, когда происходит подписка.

Дополнительную информацию о см. В документации RX JS Предметы и ReplaySubjects

решение: изменить службу сообщений 

export class MessageService {
private myMessage = new ReplaySubject<string>();

updateMessage(message: string) {
    this.myMessage.next(message);
}

clearMessage() {
    this.myMessage.next();
}

getMessage(): Observable<string> {
    return this.myMessage.asObservable();
}

}

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

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

Если вы используете BehaviorSubject, поздние подписчики получат текущее значение, поэтому, если сообщение установлено, вы загружаете эту страницу он начнется с текущего значения, которое уже установлено другим вашим компонентом.

Обратите внимание, что при создании нового BehaviorSubject вам нужно будет присвоить ему значение, поэтому в вашей службе внесите это изменение: 

// old
private myMessage = new Subject<string>();

// new, initialize with empty string, or you could use null as well in case your subscribers want to filter out cases of null and show their own default values
private myMessage = new BehaviorSubject<string>("");

Более подробную информацию о BehaviorSubject можно найти здесь: https://rxjs-dev.firebaseapp.com/guide/subject#behaviorsubject

...