Question

朋友你好，这是我在这里的第一个问题。

我在一个角度项目中遇到这种情况，我需要将id的数组从一个组件传递到另一个非常不同的组件，这两者之间没有关系，因为我发现的所有问题都说要使用viewchild，输入，输出，但是我想我不能这样做，因为当我单击从数组中第一个组件获取ID的按钮时，应该使用角度路由器导航到另一个组件，所以有办法做到这一点吗？

顺便说一句：一位朋友告诉我使用url参数，但我必须是ID的“ x”数，所以我不知道它的答案是否正确

对不起，我希望我的英语清楚

Answer 1

只需创建一个将数据保存在变量中的服务，并在需要时将其返回给您，如下所示

服务代码：

import { Injectable } from '@angular/core';

@Injectable('root')
export class DataService {
  private dataArr = [];

  constructor(){}  

  setArrData(val){
    this.dataArr = [...val]; //creates a new reference 
  }

  getArrData(){
   return this.dataArr;
  }
}

具有数组数据并确保您将数据设置为可使用并开始您的路线的组件

import { Component } from '@angular/core';
import { DataService } from 'path to service file';

@Component({
  selector: 'component-that-has-array',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class ComponentOne  {
  name = 'Angular 6';
  constructor(private dataService :DataService){

  }

  data=["1","2"];
  dataService.setArrData(data);
}

在路由后必须接收数据的组件

import { Component,OnInit } from '@angular/core';
import { DataService } from 'path to service file';

@Component({
  selector: 'component-that-recieves-array',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class ComponentTwo implements OnInit  {
  constructor(private dataService :DataService){  }
  ngOnInit(){
   data=dataService.getArrData();
  }

}

Answer 2

您可以使用rxjs中的BehaviorSubject来在组件之间共享数据

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {

  private dataSource = new BehaviorSubject<any>({});
  data = this.dataSource.asObservable();

  constructor() { }

  updatedDataSelection(data: any){
    this.dataSource.next(data);
  }

}

在您的组件文件中：

//inject service into a component

...

dataService.data.subscribe(data => {
  //do what ever needs doing when data changes
})

...

//update the value of data in the service
dataService.updateData(newData);

如何将具有ID的数组从一个组件传递到另一个组件（角度）

2 个答案: