在Angular 9中,可以使用服务来在路由之间共享数据。以下是一个示例解决方法:
首先,创建一个共享数据的服务。可以使用ng generate service shared-data
命令生成一个名为SharedDataService
的服务。
接下来,在SharedDataService
服务中创建一个sharedData
属性来存储共享的数据。同时,创建一个getSharedData
方法来获取共享数据,和一个setSharedData
方法来设置共享数据。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class SharedDataService {
private sharedData: any;
constructor() { }
getSharedData() {
return this.sharedData;
}
setSharedData(data: any) {
this.sharedData = data;
}
}
然后,在需要共享数据的组件中注入SharedDataService
服务,并使用setSharedData
方法设置共享数据,如下所示:
import { Component } from '@angular/core';
import { SharedDataService } from 'path/to/shared-data.service';
@Component({
selector: 'app-component1',
template: `
`
})
export class Component1 {
constructor(private sharedDataService: SharedDataService) { }
setData() {
const data = { message: 'Hello from Component 1' };
this.sharedDataService.setSharedData(data);
}
}
在另一个组件中,注入SharedDataService
服务并使用getSharedData
方法来获取共享数据,如下所示:
import { Component } from '@angular/core';
import { SharedDataService } from 'path/to/shared-data.service';
@Component({
selector: 'app-component2',
template: `
{{ sharedData }}
`
})
export class Component2 {
sharedData: any;
constructor(private sharedDataService: SharedDataService) { }
ngOnInit() {
this.sharedData = this.sharedDataService.getSharedData();
}
}
最后,在路由配置中设置这两个组件的路由。确保它们在不同的路由路径下。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Component1 } from 'path/to/component1.component';
import { Component2 } from 'path/to/component2.component';
const routes: Routes = [
{ path: 'component1', component: Component1 },
{ path: 'component2', component: Component2 }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
现在,当点击Component1
组件的按钮时,它会设置共享数据。然后,Component2
组件在初始化时会获取并显示共享数据。
这样就实现了在Angular 9中在路由之间共享数据的解决方法。