从一个组件中的服务访问变量到Angular 7中的另一个组件

Question

我有一个变量 testgetinfos，它存储了一个从服务返回的对象数组，我想在另一个组件中使用这个变量，

下面是我从服务中存储对象数组的函数，这里当我在这个函数中打印 testgetinfos 变量的输出时，它符合预期

samplefunc(var1,var2) {
this.testgetInfoService.retrieveAllinfos(this.var1,this.var2).subscribe(
  response => {
    this.testgetinfos= response;
    this.router.navigate(['sample']) 
    console.log(this.testgetinfos)
  }

)
}

该功能是以下组件的一部分。

import { Component, OnInit } from '@angular/core';
import { TestgetInfoService } from '../service/data/test-info.service';
import { Router } from '@angular/router';

export class testinfo {
constructor(
public id: number, 
  public testvar1: string,
  public testvar2: string,
  public testvar3: string

 ){
 }
}
@Component({
 selector: 'app-test-info',
 templateUrl: './test-info.component.html',
 styleUrls: ['./test-info.component.css']
})
export class testInfoComponent implements OnInit {
var1=''
var2=''
public test : string [] 
public testinfos : testinfo[]
constructor(
private testInfoService:TestgetInfoService,
private router:Router
) { }

ngOnInit() {

}
samplefunc(var1,var2) {
this.testgetInfoService.retrieveAllinfos(this.var1,this.var2).subscribe(
  response => {
    this.testgetinfos= response;
    this.router.navigate(['sample']) 
    console.log(this.testgetinfos)
  }

)
} 

}

下面是“示例”组件的脚本，我试图在其中打印 testgetinfos 变量的输出，

import { Component, OnInit } from '@angular/core';
import { Testinfo } from '../test-info/test-info.component';

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

constructor() { }
};

ngOnInit() {
this.displayinfo();
}
displayinfo(){
console.log("Gather info")
console.log(this.testinfos)
}
}

Answer 1

例如，您必须在要在其中使用服务的组件的构造函数中声明您的服务。您有一个名为 TestService 的服务。你想在你的 TestComponent 中使用这个服务。为此，您必须在 TestComponent 中使用依赖注入，执行以下操作：

export class TestComponent implements OnInit {
 constructor(private testService: TestService) {}

 ngOnInit() {
  this.testService.testMethod();
 }
}