从组件服务之间的共享数据获取数据时未定义数据

Data undefined when getting it from a shared data between components service

我有我的服务,我想用它在我的两个组件之间共享数据 (我不想使用 queryParams 或类似的东西,因为我不想在 url 栏中显示我想分享的数据):

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

@Injectable()
export class DataService {

    public data: any;

    setData(param) {    
        console.log("setting data :");
        console.log(param); // param correctly display in console
        this.data = param;
    }

    getData() {
        console.log(this.data) // undefined 
        return this.data;
    }
}

我的组件 A(发件人): 模板

<button (click)="navigateToB(data)">Details</button>

组件


export class ComponentA implements OnInit {

data;

ngOnInit() {
  ... // defining this.data
}

constructor(private router: Router, public dataService: DataService) { }

navigateToB(data) {
  this.dataService.setData(data);
  console.log(this.dataService.data); // data correctly displayed in console
  this.router.navigate(['ComponentB']);
}

我的组件 B(接收器):模板

{{ dataReceived | json }}

组件:

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { DataService } from '../data-service';

@Component({
  selector: 'app-compb',
  templateUrl: './compb.component.html',
  styleUrls: ['./compb.component.css'],
  providers: [DataService]
})

export class ComponentB implements OnInit {

  public dataReceived: any;

  constructor(public dataService: DataService) { 

  }

  ngOnInit() {
    this.dataReceived = this.dataService.getData(); // undefined 
  }


}

应用路由模块:

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' }
,
.
.
.
.,
  {
    path: 'ComponentB',
    component: ComponentB
  },
.
.
.
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如果您在组件级别提供服务,那么组件的每个实例都有自己的服务实例,这与其他组件实例使用的服务不同。

在模块中或至少在公共父组件中提供您的服务。

自 Angular 6 起,默认情况下,服务在其装饰器中使用 providedIn: 'root',它会自动在根模块级别提供它们。这就是你应该使用的:我们现在快 Angular 9 了。