cyan pulsar
I am refactoring a functionality and created a facade that will orchestrate the behavior of the child and parent components.
Since I don't want the facade to be global I didn't add @Injectable({ providedIn: 'root' }) and instead used @Injectable().
Now I am providing it in the parent component in its providers array and injecting in the constructor in both the parent and the child, however I still get an error about no provider being found.
How can this be resolved?
signal beacon
You'll have to show some code. this should work
cyan pulsar
@signal beacon This is the code, I redacted some stuff that shouldn't be needed (I think) to analyze what is happening.
If more information is needed please tell.
This is the facade
@Injectable()
export class InvolvedPartyFacade {
constructor(...) { ... }
}
This is the manage component (child) ts code.
@Component({
selector: 'nlf-cla-involved-party-manage',
templateUrl: './nlf-cla-involved-party-manage.component.html',
imports: [
ReactiveFormsModule,
FormsModule,
]
})
export class NlfClaInvolvedPartyManageComponent implements OnChanges {
constructor(
private fb: FormBuilder,
@Host() @SkipSelf() private facade: InvolvedPartyFacade
) {
super('NlfClaInvolvedPartyManageComponent');
}
}
This is the creation component (parent) template and ts code.
@if (hasManagerRole()) {
@if (configErrorMessages.length === 0 && isClaimAllocated) {
<nlf-cla-involved-party-manage
#involvedPartyManage
></nlf-cla-involved-party-manage>
} @else {
...
}
}
@Component({
selector: 'nlf-cla-subclaim-involved-party-create',
templateUrl: './nlf-cla-subclaim-involved-party-create.component.html',
imports: [NlfClaInvolvedPartyManageComponent],
providers: [InvolvedPartyFacade],
})
export class NlfClaSubclaimInvolvedPartyCreateComponent
implements OnChanges {
constructor(private redirectUtils: NLFClaRedirectUtils, private facade: InvolvedPartyFacade) {
super('NlfClaSubclaimInvolvedPartyCreateComponent');
}
}
I am not sure exactly what @Host plus @SkipSelf achieves. Does it work without them?
upper jay
Those should be needed for a situation where you're constructing a nested structure. So ComponentA projected in another instance of ComponentA (a tree basically)
Shown code looks not the case, considering that parent and child are different classes.
I'm not too sure about that super(...) call either...
cyan pulsar
I am not sure exactly what `@Host` plus `@SkipSelf` achieves. Does it work witho...
It didn't work without them. I tried to add it to help.
cyan pulsar
Those should be needed for a situation where you're constructing a nested struct...
The super is because all my components have some common logic in an abstract class and they extend it. I removed that from the code as the abstract class has no logic that affects this I think
signal beacon
It's weird that the injection in NlfClaSubclaimInvolvedPartyCreateComponent works, but supposedly not in its children. That goes contrary to how DI works with components.
cyan pulsar
Yeah, I'm finding it weird because according to the docs this should be working....
signal beacon
Try creating a minimal sharable reproduction (as outlined in #how-to-get-help). This may already lead you to the problem in your code.
cyan pulsar
So I got it working after some more trial and error and ending up removing @host and @skipself.
It appears I imagined it didn't work when I didn't have those annotations or something because now it works and I can't replicate the error.
Thank you @signal beacon and @upper jay for the help.
dusty pewter
I am not sure exactly what `@Host` plus `@SkipSelf` achieves. Does it work witho...
So if we have for example 3 components - 2 child and 1 parent. If we have some service that is not provided in root and we add it to parent component providers, we can just inject it into child components and share state between?
By sharing state I mean if we have some signal data in service, its values are available in all 3 components?
signal beacon
So if we have for example 3 components - 2 child and 1 parent. If we have some s...
Sure, but you don't need either @Host nor @SkipSelf for that.
dusty pewter
Cool, I didn't use standalone components yet so I thought that we need to add service to all 3 components providers, but with that way each component would create new instance of service and not share state between right?
signal beacon
Cool, I didn't use standalone components yet so I thought that we need to add se...
None of this is changed with standalone components.
But yeah, what you said is correct (standalone or not).
dusty pewter
In what case we should use skipSelf? It's used when we want Angular to search for providers in parent upper components right? But what would be use case?