从组件服务之间的共享数据获取数据时未定义数据
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 了。
我有我的服务,我想用它在我的两个组件之间共享数据 (我不想使用 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 了。