Блог

Например, у вас есть компоненты A, B и C и это направление маршрута:

 A -> B -> C
  

Я могу извлечь данные из предыдущего компонента (добрался до C и получаю данные из B)
с помощью этих строк:

Компонент C:

 private _activatedRoute: ActivatedRoute,

ngOnInit(): void {
        let B_ID = this._activatedRoute.snapshot.queryParams['B_ID'];
}
  

Но я хочу получить данные из компонента A:

Компонент C:

 private _activatedRoute: ActivatedRoute,

ngOnInit(): void {
       // let A_ID = this._activatedRoute.parent.snapshot.queryParams['A_ID'];
//Didnt retrieve the A ID
}
  

Если вы хотите осуществлять связь между компонентами, вы можете легко сделать это с помощью subjects.

Для примера, как вы упомянули, у вас есть 3 компонента A, B, C, тогда, если вы хотите получить данные из компонента в компонент C, вы должны сначала создать сервис

пример-

  export class DatapassAtoCService{

  private messageCommand = new Subject<string>();
  Data$ = this.messageCommand.asObservable();

  invokeMessage(msg: string) {
    this.messageCommand.next(msg);
  }
}
  

в этом примере я передаю значение msg, которое является типом string в компоненте A, в службу, эта служба использует объект, который является наблюдаемым, и он выдает это значение тем, кто подписался на этот метод в службе, как показано ниже.

 import { Component, OnInit } from '@angular/core';
import { DatapassAtoCService} from '../services/message.service';

@Component({
  selector: 'app-component-one',
  templateUrl: './component-one.component.html',
  styleUrls: ['./component-one.component.css']
})
export class Acomponent implements OnInit {

  constructor(private DataService: DatapassAtoCService) { }

  ngOnInit() {
  }
  string msg =This is pass to service;
  yourActionMethod() {
    this.DataService.invokeMessage(msg );
  }
} 
  

затем мы можем подписаться на эту службу в компоненте C, после чего передается это значение msg

 import { Component, OnInit, OnDestroy } from '@angular/core';
import { DatapassAtoCService} from '../services/message.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-component-two',
  templateUrl: './component-two.component.html',
  styleUrls: ['./component-two.component.css']
})
export class CComponent implements OnInit, OnDestroy {

  messageSubscription: Subscription;
  message: string;

  constructor(private Dataservice: DatapassAtoCService) { }

  ngOnInit() {
    this.subscribeToMessageEvents();
  }

  ngOnDestroy(): void {
    this.Dataservice.unsubscribe();
  }

  subscribeToMessageEvents() {
    this.messageSubscription = this.Dataservice.Data$.subscribe(
      (msg: string) => {
        this.message = msg;
      }
    );
  }

}
  

Итак, как упоминалось в приведенном выше коде, мы можем получить это значение сообщения Acomponent, используя messageSubscription в Ccomponent

Вы можете получить данные маршрутизатора, подписавшись на функцию router.events.
вы можете сделать что-то вроде этого

 this.router.events.subscribe(val => {

if (val instanceof RoutesRecognized) {
   console.log(val.state.root.queryParams);
    console.log( this.router.config)
}});
  

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

Что я делаю, так это создаю службу для обмена информацией между компонентами, например:

 import { Injectable } from '@angular/core';
import {HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UtilsService {
  information:any;
.
.
.
  

Затем вы можете сохранить информацию, прежде чем оставлять в информационной переменной из созданного сервиса.
Теперь вы можете прочитать, что находится в информационной переменной из сервиса в компоненте C.

Не забудьте импортировать сервис и добавить его в конструктор вашего компонента

 import { UtilsService } from '../../providers/utils.service';
  

_

 constructor(
    private utilsSvc: UtilsService,
  ) {
  

Вы можете получить к нему доступ с помощью this.utilsSvc.information .