Question

例如，您具有组件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
}

Answer 1

您可以通过订阅router.events函数来获取路由器数据。
你可以做这样的事情

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

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

探索 val 对象，您可以获得特定路线的值

Answer 2

我要做的是创建一个在组件之间共享信息的服务，例如：

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访问它。

Answer 3

如果要在组件之间进行通信，则可以使用主题轻松进行。

对于您提到的示例，您具有3个组件A，B，C 然后，如果您想将数据从A组件获取到C组件，则必须首先提供服务

ex-

 export class DatapassAtoCService{

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

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

在此示例中，im传递值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组件中订阅该服务，然后发出味精值

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;
      }
    );
  }

}

因此，如以上代码中所述，我们可以使用Ccomponent中的messageSubscription获得该Acomponent msg值

从路由树中的另一个组件获取数据

3 个答案: