Получить данные из другого компонента в дереве маршрутов - PullRequest
Новая
       16

Получить данные из другого компонента в дереве маршрутов

0 голосов
/ 22 марта 2019

Например, у вас есть компоненты 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
}

Ответы [ 3 ]

0 голосов
/ 22 марта 2019

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

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

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

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

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

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

_ 

constructor(
    private utilsSvc: UtilsService,
  ) {

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

0 голосов
/ 22 марта 2019

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

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

* 1005 экс- * 

 export class DatapassAtoCService{

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

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

в этом примере я передаю значение msg, которое является строкой типа в компоненте 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 msg, используя messageSubscription в Ccomponent

0 голосов
/ 22 марта 2019

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

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

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

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

...