3

我有一个带有根组件和子组件的延迟加载模块。我还有一项服务可以在根组件和子组件以及兄弟姐妹之间共享数据。

背后的用例是一个向导，用户可以在其中分多个步骤设置一些数据。每个步骤的数据都全局存储在服务中，以便父组件和每个子组件都能够访问整个数据。

现在我想为单个步骤创建防护，它应该检查之前的步骤是否已完成（服务中的数据已设置），以防止用户在不执行之前的步骤的情况下通过 URL 访问进一步的步骤。

模块

@NgModule({
imports: [
    CommonModule,
    FormsModule,
    AppointmentAgreementRouting
],
declarations: [
    AppointmentAgreementComponent,
    TopicSectionComponent,
    BranchSectionComponent,
    DatetimeSectionComponent,
    PersonalDataSectionComponent,
    ConfirmationSectionComponent,
    SectionDirective
],
providers: [
    CanActivateBranch, <-- Guard which should check if the data is set in service
    { provide: 'components', useValue: [AppointmentAgreementComponent], multi: true }
],
entryComponents: [
    AppointmentAgreementComponent,
    TopicSectionComponent,
    BranchSectionComponent,
    DatetimeSectionComponent,
    PersonalDataSectionComponent,
    ConfirmationSectionComponent
]
})

路由

const appointmentAgreementRoutes: Routes = [{
path: '',
children: [
    {path: '', redirectTo: 'thema', pathMatch: 'full'},
    {path: 'thema', component: TopicSectionComponent},
    {path: 'filiale', component: BranchSectionComponent, canActivate: [CanActivateBranch]},
    {path: 'termin', component: DatetimeSectionComponent},
    {path: 'daten', component: PersonalDataSectionComponent},
    {path: 'bestaetigung', component: ConfirmationSectionComponent},
]
}];

根组件

@Component({
selector: 'appointment-agreement',
templateUrl: './appointmentAgreement.component.html',
providers: [
    AppointmentAgreementCommunicationService <-- Service to share data
]
})

我现在的问题是，我在根组件中提供服务，因为我需要为每个组件（根和子组件）提供相同的服务实例。

但我需要在模块中提供警卫，否则我会得到“找不到 CanActivateBranch（警卫）的提供者”

如果我现在想将服务注入警卫，我会得到“没有...服务的提供者”，因为该服务只是在组件中提供，而不是在模块中提供。

有人知道如何解决这个问题吗？

提前非常感谢。

4

0 回答 0