在Angular中,可以使用路由器配置来为不同路由注入不同的依赖项。以下是一个示例解决方法:
DataService
的服务:import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
getData() {
return 'This is data from DataService';
}
}
app.module.ts
)中将该服务添加到提供商数组中,以便在整个应用程序中使用:import { NgModule } from '@angular/core';
import { DataService } from './data.service';
@NgModule({
providers: [DataService]
})
export class AppModule { }
ComponentA
和ComponentB
:import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component-a',
template: 'Component A - {{ data }}'
})
export class ComponentA {
constructor(private dataService: DataService) {}
get data() {
return this.dataService.getData();
}
}
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-component-b',
template: 'Component B - {{ data }}'
})
export class ComponentB {
constructor(private dataService: DataService) {}
get data() {
return this.dataService.getData();
}
}
app-routing.module.ts
)中配置路由,将每个组件与不同的路由关联,并在路由配置中为每个路由提供不同的依赖项。例如:import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ComponentA } from './component-a.component';
import { ComponentB } from './component-b.component';
import { DataService } from './data.service';
const routes: Routes = [
{
path: 'component-a',
component: ComponentA,
resolve: {
data: DataService // 使用 DataService 作为 ComponentA 的依赖项
}
},
{
path: 'component-b',
component: ComponentB,
resolve: {
data: OtherService // 使用 OtherService 作为 ComponentB 的依赖项
}
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上面的示例中,我们使用resolve
属性将DataService
注入到ComponentA
,并将OtherService
注入到ComponentB
。
通过以上步骤,我们可以在不同的路由中注入不同的依赖项,以满足不同组件的需求。